手机H5页面，滑动到底部自动加载下一页内容

Posted 2020-09-23 王凯的编码日志

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

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

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

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

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

代码如下：

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