Javascript滚动条翻页数据动态加载

一般分页是通过按钮触发的,最近有一个需求通过滚动条进行触发,随后做了这样一个动态加载的功能。
滚动条滚动到下侧,80%的位置,向后翻页;
滚动条滚动到上册,20%的位置,向前翻页。

代码部分

// 总的数据量,这个一般后台传过来
let total_count = 10
// 总页数,总的数据量除以页数
let total_page_count = Math.ceil(total_count / PAGE_SIZE)
let scroll_percentage
// 计算当前的比例,滚动条的进度
scroll_percentage = $('.scroll-down').scrollTop() / $('#table').height() * 100
// 向后翻页,滚动条进度大于80
if (scroll_percentage > 80) {
    if (commit_flg) return
    commit_flg = true
    start_page += 1
    if (start_page >= total_page_count) start_page = total_page_count
    if (start_page < total_page_count) {
        $.ajax({
            method: 'post',
            url: '**************',
            cache: true,
            data: {
                'startPage': start_page,
                'pageSize': PAGE_SIZE
            },
            success: function(res) {
                $('#table').html(res)
                commit_flg = false
            }
        })
    } else {
        commit_flg = false
    }
}
// 向前翻页,滚动条进度小于80
else if (scroll_percentage < 20) {
    if (commit_flg) return
    commit_flg = true
    if (start_page > 1) {
        $.ajax({
            method: 'post',
            url: '**************',
            cache: true,
            data: {
                'startPage': start_page - 1,
                'pageSize': PAGE_SIZE
            },
            success: function(res) {
                $('#table').html(res)
                commit_flg = false
                start_page -= 1
            }
        })
    } else {
        commit_flg = false
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值