直接上核心代碼,其實官網介紹的很詳細: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)); } } }); } });