layui中流加載layui.flow

1.引入layui.css和layui.js

2. html中定義容器

<div id="demo"></div>

js部分：

layui.use('flow', function(){
   var $ = layui.jquery; //不用額外加載jQuery，flow模塊本身是有依賴jQuery的，直接用即可。
   var flow = layui.flow;
   flow.load({
      elem: '#demo' //指定列表容器
      ,done: function(page, next){ //到達臨界點（默認滾動觸發），觸發下一頁
         var list = [];
         //以jQuery的Ajax請求為例，請求下一頁數據（注意：page是從2開始返回）
         $.post( '接口地址',{page:page,limit:10}, function(res){
            //假設你的列表返回在data集合中
            layui.each(res.data.list, function(index, item){
               list.push("<div class='van-col' style='padding-left: 2.5px; padding-right: 2.5px;'>" +
                     "<img src=""+item.pic+"">" +
               "</div>");
            });
            //執行下一頁渲染，第二參數為：滿足“加載更多”的條件，即后面仍有分頁
            //totalPage為Ajax返回的總頁數，只有當前頁小於總頁數的情況下，才會繼續出現加載更多
            next(list.join(''), page < res.data.totalPage);
         },'json');
      }
   });
});