jquery滚动分页插件实现

前端组件 同时被 3 个专栏收录
2 篇文章 0 订阅
1 篇文章 0 订阅
1 篇文章 0 订阅

前言

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

注意: 代码中使用到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表示服务端返回的数据。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值