layui的流載入,點選切換流載入內容,需要多次flow.load,page混亂解決方案
阿新 • • 發佈:2018-11-13
layui的流載入,如果需要點選切換流載入的內容,同時寫多個flow.load會導致多次呼叫flow導致整體page混亂
解決方案如下:
html:
<div class="model-list"> <ul id="LAY_demo1" style="width: 100%; height: 650px; overflow: auto;"></ul> </div>
JavaScript:
//第一次初始化的載入
//流載入 layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo1' //流載入容器 ,scrollElem: '#LAY_demo1' //滾動條所在元素,一般不用填,此處只是演示需要。 ,isAuto:true ,done: function(page, next){ //執行下一頁的回撥 //模擬資料插入 setTimeout(function(){ var lis = []; for(var i = 0; i < 16; i++){ lis.push('<li><div class=\'layui-col-md3 carsModel\'><img class=\'cars\' src=\'images/dzmt.JPG\'><p><img src=\'images/EN.png\'><span>一汽-大眾</span></p></div></li>') } //執行下一頁渲染,第二引數為:滿足“載入更多”的條件,即後面仍有分頁//pages為Ajax返回的總頁數,只有當前頁小於總頁數的情況下,才會繼續出現載入更多 next(lis.join(''), page < 10); //假設總頁數為 10 }, 500); } }); });
//其他點選事件的載入
$(".MOorderstab ul li").click(function(){ $("#LAY_demo1").remove(); $(".model-list").append("<ul id=\"LAY_demo1\" style=\"width: 100%; height: 650px; overflow: auto;\"></ul>"); layui.use('flow', function(){ var flow = layui.flow; flow.load({ elem: '#LAY_demo1' //流載入容器 ,scrollElem: '#LAY_demo1' //滾動條所在元素,一般不用填,此處只是演示需要。 ,done: function(page, next){ //執行下一頁的回撥 //模擬資料插入 setTimeout(function(){ var lis = []; for(var i = 0; i < 16; i++){ lis.push('<li><div class=\' layui-col-md3 carsModel\'><img class=\'cars\' src=\'images/jr.JPG\'><p><img src=\'images/EN.png\'><span>本田-竟瑞</span></p></div></li>') } //執行下一頁渲染,第二引數為:滿足“載入更多”的條件,即後面仍有分頁 //pages為Ajax返回的總頁數,只有當前頁小於總頁數的情況下,才會繼續出現載入更多 next(lis.join(''), page < 10); //假設總頁數為 10 }, 500); } }); }); });
思路是:當點選時間觸發時,把ul移除重新載入ul,相當於把之前的刪除重新載入了flow.load。每次點選page從第一頁載入