JQuery滚动加载更多 autobrowse Web通用

Web前端开发特别是移动端web,大部分使用向下滚动到底部或者接近底部后发起数据请求,打印更多数据到用户浏览器。

向各位同类推荐我自己经常使用的插件jquery.esn.autobrowse
该插件的下载地址https://github.com/zhjgstc/files/tree/master/autobrowseWeb

废话不多说直接上调用代码。

1、首先要在使用的页面引入jquery、jquery.esn.autobrowse.js、jstorage.js如果不清楚如何引用js文件,那么请关闭本页面,我帮不了你了。

2、$("#section_data").autobrowse({ //#section_data是你所希望的滚动内容,可以不是放置数据的元素。只是作为滚动时发起请求的条件或者说依据。

    url: function (offset) {
            return '发起请求的地址?offset=' + offset;//发觉插件没有自动将当前页面数据count传递给后台,所以每次需要拼接上offset。有兴趣的朋友可以自己重写一下。
        },
        template: function (response) {//response从后台返回的数据,具体要怎么数据这个返回的数据请根据自个需求决定
            $("#div_footer_loader").hide();//非必需 插件每次发起请求时将会显示loader的内容,我自己希望每次请求结束后将内容隐藏。
        },
        itemsReturned: function (response) { return response.data.length;//这里是每次返回的数据集count,我试验过。如果最后一次返回的0个数据最好也返回一个同样数据结构的空数据。  response.data是我自己后台写了一个叫data的内容,请根据实际您的数据集名称作出修改 },
        offset: 0,
        max: 100000000,
        loader: '<div class="loader" id="div_footer_loader" style="text-align:center;line-height:25px;margin-bottom:25px;height:35px;">滑动查看更多,正在加载中...</div>',
        useCache: false,
        expiration: 1
    });

如果对以上带注释内容不满意,复制粘贴后不方便使用,请使用复制使用以下内容。

    $("#section_data").autobrowse({
        url: function (offset) {
            return 'url?offset=' + offset;
        },
        template: function (response) {
            $("#div_footer_loader").hide();
        },
        itemsReturned: function (response) { return response.data.length; },
        offset: 0,
        max: 100000000,
        loader: '<div class="loader" id="div_footer_loader" style="text-align:center;line-height:25px;margin-bottom:25px;height:35px;">滑动查看更多,正在加载中...</div>',
        useCache: false,
        expiration: 1
    });

没有更多可加载内容