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从第一页加载

layui的流加载，点击切换流加载内容，需要多次flow.load，page混乱解决方案

猜你喜欢