jQuery 懒加载 分页加载

工作日志 随手笔记 仅供参考 

大概思路就是加载页面的时候初始时候加载10个 然后下拉的时候再去触发接口在加载十个 

我用的是jQuery 的插件 http://jqweui.com/extends#infinite 

首先要在给他设置一个高度 不然下拉滚动的时候不会再去请求接口

  html, body {
            height: 100%;
        }

        .wrapper {
            overflow-y: scroll;
            height: 100%;
        }

  var page = 2; //默认从第二页开始记载
        var loading = false;  //状态标记
        var tplDrawing = function wrapper() {
            $.Ajax({
                url: "**************",
                dataType: "json",
                data: {
                    id: id,//店铺id
                    page_size: 10,//每页加载的数量
                    page: page //页数
                },
                success: function (res) {
                    console.log(res.result);
                    var peripheral_content = "peripheral_content";
                    var con_data = template(peripheral_content, res.result.comments);
                    $('.peripheral_content').find(".comments").append(con_data);
                    if (res.result.more_data == 0) { //如果没有数据了 隐藏
                        loading = true;
                        $(".loading").css("display", "none");//隐藏正在加载
                        $(".weui-loadmore_line").css("display", "block")//显示暂无数据
                    } else {
                        loading = false;
                        $(".loading").css("display", "block");//显示正在加载
                        $(".weui-loadmore_line").css("display", "none");//隐藏暂无数据
                    }
                    page++;
                },
            })
        };
        //    评论分页加载
        tplDrawing();
        // $(document.body).infinite(50);
        $(".wrapper").infinite().on("infinite", function () {
            console.log(1111);
            if (loading) return;
            loading = true;
            tplDrawing()
        });