首页 > 技术文章 > 滑动到底部自动加载下一页内容,手机H5页面

mark8080 2017-06-19 09:04 原文

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容。直接在H5的js当中实现。

主要使用jquery的scroll()方法:

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。

代码如下:

$(window).scroll(function(){
  //判断是否滑动到页面底部 if($(window).scrollTop()== $(document).height() - $(window).height()){ // TODO 滑动到底部时可请求下一页的数据并加载,加载可使用append方法
} });

 

推荐阅读