1. 程式人生 > >layui的流載入,點選切換流載入內容,需要多次flow.load,page混亂解決方案

layui的流載入,點選切換流載入內容,需要多次flow.load,page混亂解決方案

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從第一頁載入