layer 流加载

流加载： 

   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";
                            li+= "
"+json[i].title+"
"
                            li+= "
"+json[i].keTotal+"课时
";
                            li+= " 
 免费课程";
                            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";
                            li+= "
"+json[i].title+"
"
                            li+= "
"+json[i].keTotal+"课时
";
                            li+= " 
 免费课程";
                            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，来自动的手工加载。