layui 流加载 滚动加载 flow 使用

希望帮助新手理解。

首先，文档已经有了模板，其次就是有些新手会不理解怎么用。

代码模板中需要修改的地方我注释一下。然后再写一个我自己使用的贴出来。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

layui.use('flow', function(){   var $ = layui.jquery;   var flow = layui.flow;   flow.load({     elem: '#demo' //需改 这里就是前端页面存放后台数据的一个div的id,     scrollElem:'#demo'//需改 加上这个就是滚动自动加载，这个id也就是上面的你的容器div，也就是你的这个容器有个滚动条，<br>　　　　　　　　　　　　　//只有出现滚动条，才能下滑继续加载数据。如果不加这句话，那么会自动出现一个加载更多按钮，点击它会自动加载下一页的数据。<br>　　isAuto:true,     done: function(page, next){  //这里的page,next不需要你更改       var lis = [];       //以下文档中的请求，当然你也可以换成你自己的ajax 请求。       $.get('/api/list?page='+page, function(res){         //如果你自己写的ajax请求，那么在你的success中，也写下下面的代码，可以理解成一个for循环动态拼装html         layui.each(res.data, function(index, item){ //不需要修改 这里的res.data 就是后台返回的数据，后台一般都是 List集合。比如后台给的键值对是  "data2"：[里面是list集合,也就是页面需要加载的数据]。那自己填写的就是res.data2           lis.push('<li>'+ item.title +'</li>'); //需要修改的地方就是这了，这里push的内容，是你拼装的一个html，,item就是每一个list[i]         });         next(lis.join(''), page < res.pages);  //这里改的就是 res.pages就是总页数，如果后台给你返回了，那最好，如果没返回，那就一定要返回一个总条数，改成 总条数/每页的个数 就好了。       });     }   }); });

　再贴出来我自己使用的代码。

        layui.use('flow', function(){
          var $ = layui.jquery;
          var flow = layui.flow;
          flow.load({
            elem: '#appList' 
            scrollElem:'#appList'
        　  isAuto:true,
            done: function(page, next){
              var lis = [];
　　　　　　　　//ajax， page是会自动从1开始计算的不用自己赋值
                 $.ajax({
                    type:"post",
                    url:"/list",
                    data:{"type":"2","pageNum",page,"appName":$("#search").val()},
                    success:function(e){
                         layui.each(e.rows, function(index, item){   //拼装每一个Item
                             var html = `<div class="item">
                                            <div attr-id=`+item.appId+`>
                                                <img src=`+item.appAvatar+`/>
                                            </div>
                                            <div>`+item.appName+`</div>
                                        </div>`
                            lis.push(html);            
                        }); 
                        next(lis.join(''), page < e.total/42); //e.total 是我的总条数 ，我每页返回42条数据
                    }
                });
            }
          })
        })