html5到底部自动加载,列表滚动到底部自动加载更多

列表滚动到底部自动加载更多

在移动端，经常会用到列表滚动到底部，拉一下加载更多，或者点一下加载更多等等，今天我说说我的一个实现的思路。

通过监听列表的滚动时间，当用户滚动到列表的底部，并停留一小段时间，便认为用户想要加载下一页的数据，当用户滚回列表的顶部时，展示刷新的按钮，点击便可刷新。

以下是实现的思路，比较粗糙，欢迎各位朋友提出建议。

HTML代码

• 点击刷新
• //列表*n

  ……

js代码

(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';

});

})();

写得匆忙，以上代码没有考虑浏览器的兼容性问题，如：addEventListener等