TP6+Layui Flow 实现信息流加载

引用一下layui官网的信息流概念：

信息流即异步逐页渲染列表元素，这是你页面已经存在的一段列表，你页面初始时只显示了6个

//HTML
<ul id="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

你想通过加载更多来显示余下列表，那么你只需要执行方法：flow.load(options) 即可

//javascript
layui.use('flow', function(){
  var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
  var flow = layui.flow;
  flow.load({
    elem: '#demo' //指定列表容器
    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
      var lis = [];
      //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
      $.get('/api/list?page='+page, function(res){
        //假设你的列表返回在data集合中
        layui.each(res.data, function(index, item){
          lis.push('<li>'+ item.title +'</li>');
        }); 

        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < res.pages);    
      });
    }
  });
});

下面开始介绍我的方法：

1、列表首次打开默认加载6条数据

2、点击加载更多按钮，触发加载更多，再次加载6条新的数据

3、如此循环，直到判断最后一次请求的数据不足6条时，则把剩余数据加载出来并显示没有更多了。

<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        var $ = layui.jquery;
        //手动点击加载下一页
        flow.load({
            elem: '#centerlist' //流加载容器
            ,scrollElem: '#centerlist' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: false     //自动加载  为true的时候是自动加载
            ,isLazyimg: true   //图片懒加载
            ,end:'<div class="text-center"><button class="btn btn-simples">没有更多了</button></div>'
            ,done: function(page, next){ //加载下一页
                setTimeout(function(){
                    $.get(
                        "{:url('index/datalist')}",
                        {page:page},
                        function(d){
//                      console.log(d);
                            var lis = [];
                            layui.each(d.res, function(index, item){  //遍历后台传过来的数据
                                var html =
                                '<div class="post post-list clearfix">'
                                +  '<div class="thumb rounded">'
                                +  '<span class="post-format-sm">'
                                +  '<i class="icon-picture"></i>'
                                +  '</span>'
                                +  '<a href="'+item.url+'">'
                                +  '<div class="inner">'
                                +  '<img class="zuixin" src="'+item.thumb+'" alt="post-title">'
                                +  '</div>'
                                +  '</a>'
                                +  '</div>'
                                +  '<div class="details">'
                                +  '<ul class="meta list-inline mb-3">'
                                +  '<li class="list-inline-item"><a href="../about.html"><img class="yuanava" src="{$config.portrait}" class="author" alt="author"/> {$config.linkman}</a></li>'
                                +  '<li class="list-inline-item"><a href="'+item.listurl+'">'+item.category_name+'</a></li>'
                                +  '<li class="list-inline-item">'+item.update_time+'</li>'
                                +  '</ul>'
                                +  '<h5 class="post-title"><a href="'+item.url+'">'+item.title+'</a></h5>'
                                +  '<p class="excerpt mb-0">'+item.description+'</p>'
                                +  '<div class="post-bottom clearfix d-flex align-items-center">'
                                +  '<div class="more-button float-end">'
                                +  '<a href="'+item.url+'"><span class="icon-options"></span></a>'
                                +  '</div>'
                                +  '</div>'
                                +  '</div>'
                                +  '</div>'
                                lis.push(html);
                            });
                            next(lis.join(''),page < d.total_page);  //拼接成字符串
                        }
                    );
                },500);
            }
        });
 });
</script>

PHP 后端

public function datalist(Request $request)
    {
        $page_size = 6;  //每页显示条数
        $count = \app\common\model\NewsModel::where('status',1)->count();  //总记录数
        $data['total_page'] = ceil($count/$page_size);  //总页数
        $cur_page = intval($request::param('page'))-1;  //默认前端page传过来为1 
        $data['res'] = \app\common\model\NewsModel::where('status',1)
            ->limit(($cur_page*$page_size),$page_size)  //limit默认要从零开始
            ->order('create_time','desc')
            ->select();
        foreach($data['res'] as $key=>$val){
            $val->category_name = \app\common\model\NewsCategoryModel::where('id',$val->category_id)->value('name');    //获取分类名
            $val->url = '/news/show-'.$val->id.'.html';
            $val->listurl = '/news/list-'.$val->category_id.'.html';
        }
        return json($data);  //返回json
    }