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

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

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

以下是实现的思路,比较粗糙,欢迎各位朋友提出建议。
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等

    原文作者:southnan0
    原文地址: https://segmentfault.com/a/1190000003938479
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞