Jquery Infinite Scroll 滚动插件简单使用

在开发中，需要对分页处理，通常的作法是，使用页码，即展示分页条，点击页码，跳到相应的页。

另一种作法是，通过滚动自动加载下一页。它分为，前端渲染分页数据和后端渲染分页数据。

前端渲染：指 ajax 请求数据后，由 JS 解析数据，并渲染到页面上。
后端渲染：指 ajax 请求的数据，即由后端（服务器）渲染后的数据，前端不需要再做处理。

Jquery Infinite Scroll 属于后端渲染，前端只负责展示，不作具体处理；它也支持对 json 数据处理，也就是说，由前端对数据处理后再渲染。

初始化时，path 可以使用3种方式定义：

内置分页
path: ‘?getList?page={{#}}’

使用隐藏元素
path: ‘.pagination__next’
页面中：
下一页

<a class="pagination__next" style="display: none;" href="?getList&amp;page=1">下一页</a>

通过回调

path: function () {
    return '/addons/kaoshi/user_plan/do_question?test=' + (this.loadCount+1);
}

留意，返回的内容是 html 页面时，则，必须包含下一页链接。

<a class="pagination__next" style="display: none;" href="?getList&amp;page=2">下一页</a>

示例

<ul id="data_list">
    <li class="item_li"> 内容</li>
</ul>
<a style="display: none;" href="?getList&page=1" class="pagination__next">下一页</a>

<script>
$('#data_list').infiniteScroll({
    // 定义页地址
    path: '?getList&page={{#}}',

    // 定义追加元素
    append: '.item_li',
    // 是否自动加载
    prefill: true,
    // 检查是否是最后一页
    checkLastPage: '.pagination__next',
});
</script>

后端返回时，除了列表内容：

<ul>
    <li class="item_li">内容</li>
    <li class="item_li">内容</li>
    <li class="item_li">内容</li>
</ul>

还需要返回下一页读取地址（每次返回，都将是新的下一页地址）：

<a class="pagination__next" style="display: none;" href="?getList&amp;page=2">下一页</a>

这样，在鼠标滚动（向下滑动时），会自动加载下一页。当没有数据时，不返回下一页的地址就可以了。

有时候，需要先销毁再初始化，使用下面的代码先行判断后再销毁。

if ($('#data_list').data('infiniteScroll')) {
    $('#data_list').infiniteScroll('destroy');
}

除了本文介绍的简单使用外，它还支持，ajax 数据处理、加载效果、加载按钮等等，参见官方配置说明。

留意 Infinite Scroll 有3 种许可形式：开源、商业和 OEM。

相关文章：