layer 流加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38287952/article/details/82669471

流加载： 

   1、手工加载

layui.use('flow', function(){
        var flow = layui.flow;

        flow.load({
            elem: '#menu-list' //流加载容器
            //,scrollElem: '.menu-botR' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: false
            ,done: function(page, next){ //加载下一页

                var getSubVodieData = $('#getSubVodieData').val();

                $.post(getSubVodieData,{'catid' : catid, 'page': page}, function(data) {

                    var json = data.data.data;

                    json = JSON.parse(json);

                    //模拟插入
                    setTimeout(function(){

                        var lis = [];
                        for (var i=0; i<json.length; i++) {
                            var li = "<li><dl><dt><a href='"+json[i].url+"'><img src='"+json[i].thumb+"' /></a></dt>";
                            li+= "<dd><p class='tit'><a href='"+json[i].url+"'>"+json[i].title+"</a></p>"
                            li+= "<div class='much'><p class='date'><span class='keshi'>"+json[i].keTotal+"课时</span></p>";
                            li+= " <p class='pe'><a href=href='"+json[i].url+"'><img  src='/static/cloud/images/shopcar.png' /> <span class='price'>免费课程</span>";
                            li+= "</a></p></div></dd></dl></li>";
                            lis.push(li);
                        }

                        next(lis.join(''), page < data.data.count); //假设总页数为 6
                    }, 200);
                });
            }
        });
    });

  2、滚动加载         

layui.use('flow', function(){
        var flow = layui.flow;

        flow.load({
            elem: '#menu-list' //流加载容器
            ,scrollElem: '.menu-botR' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,done: function(page, next){ //加载下一页

                var getSubVodieData = $('#getSubVodieData').val();

                $.post(getSubVodieData,{'catid' : catid, 'page': page}, function(data) {

                    var json = data.data.data;

                    json = JSON.parse(json);

                    //模拟插入
                    setTimeout(function(){

                        var lis = [];
                        for (var i=0; i<json.length; i++) {
                            var li = "<li><dl><dt><a href='"+json[i].url+"'><img src='"+json[i].thumb+"' /></a></dt>";
                            li+= "<dd><p class='tit'><a href='"+json[i].url+"'>"+json[i].title+"</a></p>"
                            li+= "<div class='much'><p class='date'><span class='keshi'>"+json[i].keTotal+"课时</span></p>";
                            li+= " <p class='pe'><a href=href='"+json[i].url+"'><img  src='/static/cloud/images/shopcar.png' /> <span class='price'>免费课程</span>";
                            li+= "</a></p></div></dd></dl></li>";
                            lis.push(li);
                        }

                        next(lis.join(''), page < data.data.count); //假设总页数为 6
                    }, 200);
                });
            }
        });
    });

   

   在layer 中 使用 手工加载和滚动加载 主要在于一个参数的使用

   1、scrollElem 

     滚动条所在元素选择器，默认document。如果你不是通过窗口滚动来触发流加载，而是页面中的某一个容器的滚动条，那么通过该参数指定即可。 

   那么如何理解呢？

  开启滚动加载我需要把 scrollElem 参数 指定为  .menu-botR 元素

 当滚动条触发到 指定元素（.menu-botR ）的最底部就会自动触发加载。

如果这个参数我不填写，那么这里就默认为document，那么就不会触发 滚动加载的效果。

总结：使用滚动加载需要自定义当前滚动区域的DOM对象，来触发滚动加载。

           而手工加载需要把 isAuto 参数改为 false，来自动的手工加载。