移动端长列表滚动优化

烟海之蓝 2019-07-30

javascript LOG page html list 数组 移动端优化 分屏加载

当移动端无限加载列表的滚动的时候,如果不做处理就会出现性能问题,会出现卡顿等问题,这时候就需要去优化。

思路

  • 可以把数据分成一屏一屏加载,初始化加载2屏数据
  • 往下滚动监测到滚动到底部后,添加一屏数据,同时把第一屏数据移除掉,并改变滚动条的位置
  • 往上滚动监测到滚动到顶部后,把之前移除掉的数据添加到顶部,同时把最后一屏数据移除掉,并改变滚动条的位置
  • 无论往上还是往下,都确保只有两屏数据在页面内

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>长列表滚动</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .page li{
        height: 50px;
        padding: 0 10px;
        /*background: #f2f2f2;*/
    }
</style>
</head>
<body>
    <div id="list"></div>

    <script type="text/javascript" src="../../js/lib/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var PAGE = 1; //初始化页数
        var PAGESIZE = 15; //每页展示几条数据

        var $list = $('#list'); //列表

        var preRemoveArray = []; //被移除的当前页面之前的页面
        var nextRemoveArray = []; //被移除的当前页面后面的页面

        var init = function() {
            initPage();
            initEvent();
        };

        var initPage = function() {
            renderData();
        };

        var initEvent = function() {
            var $page;
            var length;
            window.onscroll = function() {
                if (isTop()) {
                    if (preRemoveArray[0]) {
                        length = preRemoveArray.length;
                        $page = $($('.page')[$('.page').length - 1]); //获取当前列表中显示的最后一页
                        nextRemoveArray.push($page[0].outerHTML); //将最后一页内容数组
                        $list.prepend(preRemoveArray.pop(length - 1)); //将上一页内容添加进列表
                        console.log(document.documentElement.scrollTop)
                        document.documentElement.scrollTop = document.documentElement.scrollTop + $($('.page')[0]).height(); //设置滚动条位置
                        console.log(document.documentElement.scrollTop)
                        $page.remove(); //移除最后一页
                    }
                } else if (isBottom()) {

                    $page = $($('.page')[0]); //获取当前列表中显示的第一页
                    preRemoveArray.push($page[0].outerHTML); //将第一页内容数组

                    if (nextRemoveArray[0]) { //如果已经浏览过下面的内容
                        length = nextRemoveArray.length;
                        $list.append(nextRemoveArray.pop(length - 1)); //将下一页内容添加进列表
                    } else { //如果没有浏览过下面的内容
                        renderSinglePage();
                    }
                    console.log(document.documentElement.scrollTop)
                    document.documentElement.scrollTop = document.documentElement.scrollTop - $page.height(); //设置滚动条位置
                    console.log(document.documentElement.scrollTop)
                    $page.remove(); //移除第一页
                }
            };
        };

        var renderData = function() {
            var innerHTML = '';

            //我设定它永远只显示两页,所以一开始先加载两页数据出来
            for (var i = 0; i < 2; i++) {
                innerHTML += getData();
            }

            $list.append(innerHTML);
        };

        var renderSinglePage = function() {
            var innerHTML = '';
            innerHTML += getData();
            $list.append(innerHTML);
        };

        var getData = function() {
            var innerHTML = '';
            innerHTML += '<div class="page page-' + PAGE + '">';

            for (var i = 0; i < PAGESIZE; i++) {
                innerHTML += '<li>' + PAGE + '</li>'; //为方便看的清楚,我们给每行数据标记它是属于第几页的
            }

            innerHTML += '</div>';
            PAGE++;

            return innerHTML;
        };

        var isBottom = function() {
            return getScrollTop() + window.screen.height == document.body.clientHeight;
        };

        var isTop = function() {
            return getScrollTop() === 0;
        };
        function getScrollTop(){
            return document.documentElement.scrollTop || document.body.scrollTop;
        }

        init();
    </script>
</body>
</html>
登录 后评论
下一篇
冒顿单于
10708人浏览
2019-08-28
相关推荐
RecyclerView问题汇总
738人浏览
2019-05-05 09:47:50
C++ Builder 初学问与答(四)
269人浏览
2009-04-03 12:50:00
block unicast机制
499人浏览
2017-11-08 22:24:00
0
2
0
195