移动端滚动加载数据实现

模拟场景:移动端上划到底,加载更多数据。
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();
         }
   }) 

})

posted @ 2018-10-25 21:07  柒月未央  阅读(1321)  评论(0编辑  收藏  举报