jquery滚动分页插件实现

前言

滚动刷新的插件百度能百度出很多，虽然都能实现自己的功能，但是却不是自己最理想的，它们要不就是功能太臃肿，要不就是配置太复杂。这里我分享一个自己写的一个。

注意： 代码中使用到jquery，如果你不想过度依赖jquery，可以将$换成javascript的原生写法。如果你是用在vue中，可以使用如`vue-infinite-scroll`。

代码

var lsScroll = (params) => {
    let __data = Object.assign({}, params.data, { page: params.init.page != undefined ? params.init.page : 1 })
    var lsScrollAjaxHandle = () => {
        return new Promise(resolve => {
            $.ajax({
                type: "POST",
                url: params.url,
                data: __data,
                success: function (response) {
                    resolve(response)
                }
            });
        })
    }
    var __el = $(params.el);
    __el.bind("scroll", function (e) {
        if ((__el[0].clientHeight + __el[0].scrollTop) >= __el[0].scrollHeight) {
            lsScrollAjaxHandle().then( response =>{
                __data = Object.assign({}, __data,{ page: __data.page + 1 })
                params.success(response)
            })
        }
    })
}

代码说明

我采用的方式并不是传统的js的插件写法，而是采用method的方式。lsScroll方法接收params对象参数。
__data是作为访问服务端时传入的参数。 在第一行会生成__data，其中要特别注意params.init.page，如果不存在会默认赋值1，page参数也是用来作为后端页码的标识符(有需要可以对其设置为自定义，这里暂时不实现)
lsScrollAjaxHandle()方法是用来发送ajax请求，在对dom绑定滚动事件后，当滚动到底部时，调用lsScrollAjaxHandle(),并将后端返回的数据传入回调方法success()中

使用

$(document).ready(function () {
    lsScroll({
        el: "#lsjz_div",
        url: "http://localhost:8080/profile/**.htm",
        data: { //请求参数。
            jjdm: 'SX1782'
        },
        init: { //初始化一些配置。
            page: 1 //页码的初始值，会自动拼接到url中
        },
        success:function(response){
            response.forEach(element => {
                $("#lsjz_table").append(element)
            });
        }
    });
})

使用参数说明

el：要绑定的dom节点，id或class
url: 访问服务端的url地址
data: 访问服务端时传入的请求参数
init: 初始化一些自定义的需要。因为我这里需用到page的初始化，暂时只实现page的初始化。默认page值为1，每次访问后该值会加1
success: 访问服务端后的回调方法，response表示服务端返回的数据。