移动端滚动加载数据实现


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

})


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM