首页 > 移动平台 > 详细

手机端H5上滑加载下一页

时间:2016-03-07 18:40:52      阅读:378      评论:0      收藏:0      [点我收藏+]

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 });

具体代码和示例前往github

手机端H5上滑加载下一页

原文:http://www.cnblogs.com/lihuazhai/p/5251153.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!