移动前端开发js 实现无限加载分页

.你移动端前端开发的理解?|前端开发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); //绑定滚动事件
前端移动端开发手机键盘|移动前端开发培训好贵|数据库前端开发教程
» 本文来自:前端开发者 » 《移动前端开发js 实现无限加载分页》
» 本文链接地址:https://www.rokub.com/4804.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!