手机端滑动至底部时自动加载内容

最新推荐文章于 2021-10-13 17:31:24 发布

原创最新推荐文章于 2021-10-13 17:31:24 发布 · 510 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #jquery

笔记同时被 2 个专栏收录

28 篇文章

订阅专栏

前端开发

27 篇文章

订阅专栏

本文深入探讨了使用jQuery实现的滚动加载技术，详细介绍了如何通过监听滚动事件并判断滚动位置来自动加载更多数据，展示了具体的JavaScript代码实现，包括数据请求、DOM元素的动态插入等关键步骤。

//滚动至底部时自动加载
var page = 1;
$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollTop + windowHeight >= scrollHeight-550){
　　    //加载数据
        $.ajax({url:"/index.php?c=product&a=productlist&json=true&cid={$Think.get.cid}&p="+page, async: false, success:function(re){
            for (var i = re.length - 1; i >= 0; i--) {
               $('#conlist').append('<div class="layui-col-xs6 productlist"><a href="/index.php/Mobile/productdetail/id/'+ re[i].id +'.html"><div class="product-img"><img src="/'+ re[i].pimage +'"></div><p class="lable">'+ re[i].title +'</p></a></div>');
            }
            if(undefined == re[0]){
                layer.msg('不要再滑了，没有了！');
            };
            
        }});
        page++;

　　}
});