上拉分页

pc端分页,大多是点击页码或者下一页来翻页,这种方式不适合移动端。移动端手指滑动操作方便,就产生了上滑下载分页的交互模式,本文介绍这种方法的实现。

思路:绑定页面滚动事件->监听页面滑动底部->ajax请求下一页数据->组装dom插入页面。

主要功能代码

监听滑动事件,判断如果滑动底部触发请求下一页面方法。

复制代码
 1 $(window).scroll(function () {
 2      //已经滚动到上面的页面高度
 3     var scrollTop = $(this).scrollTop();
 4      //页面高度
 5     var scrollHeight = $(document).height();
 6       //浏览器窗口高度
 7     var windowHeight = $(this).height();
 8      //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
 9      if (scrollTop + windowHeight == scrollHeight) {
10                     dragThis.insertDom();
11       }
12 });
复制代码

具体代码和示例前往https://github.com/finance-sh/H5Module/tree/master/dragLoad。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值