手机web下拉加载

最新推荐文章于 2022-01-10 16:49:28 发布

转载最新推荐文章于 2022-01-10 16:49:28 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/baocheng/p/6055666.html

文章标签：

#json

本文介绍了一种使用zepto.js实现移动端网页无限加载的方法。当用户滚动页面接近底部时，自动加载下一页的内容，通过添加加载图标提高用户体验。文章提供了具体的JavaScript代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//需要 zepto.js支持
    var page=0;//当前页
    var pages=1;//总页数
    var ajax=!1;//是否加载中
    Zepto(function($){
        $(window).scroll(function(){
            if(($(window).scrollTop() + $(window).height() > $(document).height()-40) && !ajax && pages > page){
                //滚动条拉到离底40像素内，而且没ajax中，而且没超过总页数
                //json_ajax(cla,++page);
                page++;//当前页增加1
                ajax=!0;//注明开始ajax加载中
                $(".list").append('<div class="loading"><img src="/template/mobile/loading.gif" alt="" /></div> ');//出现加载图片
                $.ajax({
                    type: 'GET',
                    url: './json.php?page='+page+'&'+Math.random(),
                    dataType: 'json',
                    success: function(json){
                        pages=json.pages;//更新总页数
                        page=json.page;//更新当前页（js不太可靠）
                        for(var i= 0,l = list.length;i<l;i++){
                            //处理数据并插入
                        }
                        $(".loading").remove();//删除加载图片
                        ajax=!1;//注明已经完成ajax加载
                    },
                    error: function(xhr, type){
                        $(".loading").html("暂无内容！");
                    }
                });
            }
        });
    })