列表滚动到底部自动加载更多
在移动端,经常会用到列表滚动到底部,拉一下加载更多,或者点一下加载更多等等,今天我说说我的一个实现的思路。
通过监听列表的滚动时间,当用户滚动到列表的底部,并停留一小段时间,便认为用户想要加载下一页的数据,当用户滚回列表的顶部时,展示刷新的按钮,点击便可刷新。
以下是实现的思路,比较粗糙,欢迎各位朋友提出建议。
HTML代码
<div id="cnt" class="cnt">
<div class="listCnt">
<ul>
<li id="loadMore" class="eachList">点击刷新</li>
<li class="eachList"></li> //列表*n
……
</ul>
</div>
</div>
js代码
<script>
(function () {
var lastScrollTop = 0;
var timer = null;
document
.getElementById('cnt')
.addEventListener('scroll', function (e) {
if (timer) {
clearTimeout(timer);
timer = null;
}
var target = e.currentTarget;
var listCnt = document.getElementsByClassName('listCnt')[0];
var loadMore = document.getElementById('loadMore');
var curScrollTop = target.scrollTop;
var scrollDown = curScrollTop - lastScrollTop > 0;
var scrollUp = !scrollDown;
var targetHeight = target.offsetHeight;
var listCntHeight = listCnt.offsetHeight;
var isEnd = curScrollTop + targetHeight === listCntHeight;
var isTop = curScrollTop === 0;
if (isTop) {
//想要性能好点,可以加个定时器,不要每次滚到头部都刷新
return loadMore.style.display = 'block';
}
if (isEnd) {
//停留时间请根据实际情况调整
timer = setTimeout(function () {
//loadMoreFn
console.info('loadMore')
}, 2000)
}
loadMore.style.display = 'none';
});
})();
</script>
写得匆忙,以上代码没有考虑浏览器的兼容性问题,如:addEventListener等