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

女孩从事前端开发工作好吗 程序员前端开发工作内容 找前端开发工作

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) //绑定滚动事件

前端开发怎样能去工作经验 前端开发工作周报模板 wed前端开发工作流程

» 本文来自:前端开发者 » 《移动端js 实现无限加载分页》
» 本文链接地址:https://www.rokub.com/5852.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!