登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

手机端H5上滑加载下一页

2016-02-02 16:36:36 | 浏览量:4458

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

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

主要功能代码

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

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

具体代码和示例前往github 有问题留言交流。

需求及问题提交:

点击图片更换数字

0.3221s