前端开发者.你移动端前端开发的理解?|前端开发pc端与移动端的区别|web前端开发招聘 拉钩
js 实现无限加载分页（适合移动端）
原理：当滚动条到达底部时，执行下一页内容。
判断条件需要理解三个概念：
1.scrollHeight 真实内容的高度
2.clientHeight 视窗的高度，即在浏览器中所能看到的内容的高度
3.scrollTop 视窗上面隐藏掉的部分，即滚动条滚动的距离
思路：
1.使用fixed定位加载框
2.使用$(window).scroll();方法来触发是否加载
3.通过 真实内容高度 – 视窗高度 – 上面隐藏部分 < 5 ,作为加载触发的条件
javascript 代码
var page = 1; //当前页的页码
var allpage; //总页码，会从后台获取
function showAjax(page) {
$.ajax({
url: “”,
type: “”,
data: “”,
success: function(data) {
//要执行的内容
showContent();
page++; //页数加1
},
});
}
function scrollFn() {
//真实内容的高度
var pageHeight = Math.max(
document.body.scrollHeight,
document.body.offsetHeight,
);
//视窗的高度
var viewportHeight =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight ||
0;
//隐藏的高度
var scrollHeight =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
if (pageHeight – viewportHeight – scrollHeight < 20) {
//如果满足触发条件，执行
showAjax(page);
}
}
$(window).bind(“scroll”, scrollFn); //绑定滚动事件
前端移动端开发手机键盘|移动前端开发培训好贵|数据库前端开发教程
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册