Infinite Scroll 或 waypoint 实现滚动分页

郑凯文 Javascript
阅读 (2143) 2018-05-31 13:55:46
手机端 Infinite Scroll 实现无限分页时，前题必需已有有分页链接才能实现，改用 waypoint 可以实现翻到屏幕底部就发起请求加加数据，但前提是你设置到页码

Infinite Scroll 实现无限分页时，前题必需已有有分页链接才能实现,那么当我们的前后端数据分离时，前端代码实现分页时，也是在请求列表数据后，才能获取到分页数据，再渲染分页，那这种情况 Infinite Scroll 实现时就会有一个先后顺序的问题。有的同学可能就无法下手了。

（2018－05－31 貌似最新版的 Infinite Scroll 也有自定义分页数据请求方法，但没细看）

这里提一下另一个方法实现，waypoint插件，主要用于判断屏幕滚动到哪里的插件，我们可以用此插件判断屏幕滚动到底部时，用来触发新分页数据的请求，从而实现无限加载新数据的功能。

每滚动到底部一次，就给#page页码输入框加1，如果最后一次数据返回为空的，给 #isEnd 输入框标记为1

滚动到页面底部时，先判断#isEnd是否已标记为1，不是1再请求下一页数据即可

html:

<body>
<div class="wrapper" id="app">
  <input type="hidden" name="page" id="page" value="1">
  <input type="hidden" name="isEnd" id="isEnd" value="0">
  <div class="container pt-10 pb-10">
    <div id="list">
    </div>
  </div>
</div>

<footer>
  <div id="more" class="text-center ">正在加载</div>
</footer>
</body>

javascript:

$(function() {
    $footer = $('footer'),
        opts = {
            offset: '100%'
        };

    var setData = function() {
        var pageSize = 10;
        var page = $('#page').val();
        // 这里请求新分页的数据
        $.ajax({
            url: 'http://www.requesturl.com/?page=' + page + '&pageSize=' + pageSize,
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                // 数据结构请按你自己的代码逻辑进行更改
                var res = response.list;

                if (res.length > 0) {
                    var html = '';
                    $.each(res, function(index, item) {
                        html += item.content;
                    });
                    // 往list里添加数据
                    $('#list').append(html);

                    // 设置下一页分页码
                    $('#page').val(parseInt(parseInt($('#page').val()) + 1));
                } else {
                    // 没有数据就进行标记，下次再滚动到底部就不再发起请求了
                    $('#isEnd').val(1);
                    $('#more').html('已经到底了');
                }

                $footer.waypoint(opts);
            }
        });
    }



    $('#page').val(1);
    setData();


    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');

        // 先判断是否已经加载完了，当然，如果数据一直在动态增加，可以把这个判断去掉，也就是每次滚动到底部都加载数据，但对应的分页设置也要更改，这里不作讨论，自行解决
        if ($('#isEnd').val() != 1) {
            setData();
        }
    }, opts);
});

waypoint 版本用的以前的某个版本，我看了下官网最新版，使用方式已经不太一样了

这里放出我用的版本：waypoints, 以防版本不对造成上面的代码失效

 

就酱………

更新于：2018-05-31 13:55:46
返回
返回顶部