本文实例为大家分享了js实现移动端无限加载分页的具体代码,供大家参考,具体内容如下
<强>原理:当滚动条到达底部时,执行下一页内容。
判断条件需要理解三个概念:
,,1.scrollHeight真实内容的高度
,,2.clientHeight视窗的高度,即在浏览器中所能看到的内容的高度
,,3.scrollTop视窗上面隐藏掉的部分,即滚动条滚动的距离
<>强思路:
,,,1.使用固定的定位加载框
,,2 .使用$(窗口).scroll();方法来触发是否加载
,,3.通过真实内容高度——视窗高度——上面隐藏部分& lt;10日,作为加载触发的条件
代码样例
var=1页;//当前页的页码
var flagNoData=https://www.yisu.com/zixun/false;//错误
var allpage;//总页码,会从后台获取
函数showAjax(页面){
. ajax({美元
url:“”,
类型:",
数据:",
成功:功能(数据){//要执行的内容
showContent ();
如果(page>=data.allpage){//当前页码大于等于总页码
flagNoData=https://www.yisu.com/zixun/true;
};
页+=1;//页数加1
}
}）
}
函数scrollFn () {//真实内容的高度
var pageHeight=Math.max (document.body.scrollHeight document.body.offsetHeight);//视窗的高度
var viewportHeight=窗口。innerHeight | | document.documentElement。clientHeight | | document.body。clientHeight | | 0;//隐藏的高度
var scrollHeight=窗口。pageYOffset | | document.documentElement。scrollTop | | document.body。scrollTop | | 0;
如果(falgNoData){//数据全部加载完了
返回;
}else if (pageHeight - viewportHeight scrollHeight <10){//如果满足触发条件,执行
showAjax(页面);
}
}
$(窗口).bind(“滚动”,scrollFn);//绑定滚动事件
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
