layui 滾動加載

直接上核心代碼,其實官網介紹的很詳細:ajax

var pageSize = 5;//每次請求新聞的條數
flow.load({
    elem: '#newsList' //指定列表容器
    ,scrollElem: '#newsList'//滾動條所在元素
    ,done: function(page, next){ //到達臨界點(默認滾動觸發),觸發下一頁的回調
        $.ajax({
            type: "POST",
            dataType: "json",
            data: {'pageIndex': page,'pageSize':pageSize},//請求的頁碼和每頁顯示條數
            async: true,
            url: '/news/list.do',
            success: function (result) {
                var lis = [];
                if (result.req && result.rows.length > 0) {//數據插入
                    //result.rows爲Ajax返回的新聞數據
                    layui.each(result.rows, function(index, item){
                        var newsHtml = '<span news-id="'+item.id+'">'+ item.title +'</span>';
                        lis.push(newsHtml);
                    });

                    //執行下一頁渲染,第二參數爲:知足「加載更多」的條件,即後面仍有分頁
                    //result.total爲Ajax返回的總頁數,只有當前頁小於總頁數的狀況下,纔會繼續出現加載更多
                    next(lis.join(''), page < Math.ceil(result.total/pageSize));
                }

            }
        });
    }
});
相關文章
相關標籤/搜索