移动端滚动加载数据实现

模拟场景：移动端上划到底，加载更多数据。
1、本例子基于jQuery实现。监听滚动事件。
$(function(){
$(window).scroll(function(){
})
})

2、获取滚动条到文档顶部的距离，上图scrollTop那段。原生JS可用document.documentElement.scrollTop获取。
var scrollTop = Math.ceil($(this).scrollTop());

3、获取可视区高度。原生JS可用document.documentElement.clientHeight获取。
var _height = $(this).height()
4、获取文档总高度。原生JS用document.body.scrollHeight获取
var _h = $(document).height();
5、如果scrollTop+_height的距离大于等于_h,说明触底了，再次请求数据追加到当前数据后面即可。
完整代码如下：getImage（）为请求数据的方法。
$(function(){
getImage();
\((window).scroll(function(){ var scrollTop = Math.ceil(\)(this).scrollTop());//滚动条与上面的距离document.documentElement.scrollTop
var _height = $(this).height();//可视区高度document.documentElement.clientHeight
var _h = $(document).height();//总高度 document.body.scrollHeight
if(scrollTop + _height >= _h){

             console.log('到底了')
                getImage();
         }
   }) 

})

转载于:https://www.cnblogs.com/mengzhiyao/p/9852911.html