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

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

在移动端，经常会用到列表滚动到底部，拉一下加载更多，或者点一下加载更多等等，今天我说说我的一个实现的思路。
通过监听列表的滚动时间，当用户滚动到列表的底部，并停留一小段时间，便认为用户想要加载下一页的数据，当用户滚回列表的顶部时，展示刷新的按钮，点击便可刷新。

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

@H_404_14@<div id="cnt" class="cnt"> <div class="listCnt"> <ul> <li id="loadMore" class="eachList">点击刷新</li> <li class="eachList"></li> //列表*n …… </ul> </div> </div>

js代码

@H_404_14@<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等