jquery移动端分页上拉加载

最新推荐文章于 2021-06-03 17:01:12 发布

原创最新推荐文章于 2021-06-03 17:01:12 发布 · 992 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery

本文深入探讨了网页中无限滚动加载技术的实现细节，通过JavaScript编程实现数据的动态加载，当用户滚动到页面底部时自动加载更多内容，提升用户体验。

$(function(){
    let pageNo = 1 //定义页数
    let pageSize = 10 //定义加载条数
    showDate() //执行加载数据函数第一页
    //滚动条触底判断
    $(window).scroll(function(){
        let scrollTop = Math.ceil($(this).scrollTop()) //滚动条与顶部的高度
        let curHeight = $(this).height() //当前可视页面高度
        let totalHeight = $(document).height() //页面的总高度
        if(scrollTop+curHeight>=totalHeight){
          showDate(pageNo++)
        }
    })

    function showDate() { //加载数据函数 }
})