thinkphp6配合Layui实现流加载

thinkphp6代码

// 渲染首页
public function index()
{
    return View::fetch();
}
// 准备流数据
public function list(){
    $list = Archives::where("status",1)
        ->with(["sheng","shi","qu"])
        ->order("id desc")
        ->paginate(["list_rows"=>10,"page"=>$this->page]);
    return $this->success("ok",$list);
}

前端代码

<div class="main">
    <ul id="flow">
    </ul>
</div>

<script src="/static/layui/layui.all.js"></script>
<script>
    var $ = layui.$;
    var flow = layui.flow;
    flow.load({
        elem: '#flow' //指定列表容器
        ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
            var lis = [];
            //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
            $.get('/index/index/list?page='+page, function(res){
                //假设你的列表返回在data集合中
                if (res.code == 1) {
                    var data = res.data;
                    layui.each(data.data, function(index, item){
                        lis.push("<li>\n" +
                            "                <a href=\""+item.url+"\" class=\"clearfix\">\n" +
                            "                    <div class=\"item-img\">\n" +
                            "                        <img src=\""+item.litpic+"\" alt=\"\">\n" +
                            "                    </div>\n" +
                            "                    <div class=\"item-txt\">\n" +
                            "                        <div class=\"item-tit\">" + item.title+"</div>\n" +
                            "                        <div class=\"item-distance\">"+item.title2+"</div>\n" +
                            "                        <div class=\"item-time\">\n" +
                            "                            开园时间："+item.start_time+"-" + item.end_time +
                            "                        </div>\n" +
                            "                        <div class=\"item-adress\">\n" + item.sheng.name +
                            "                            -"+item.shi.name + "-" + item.qu.name +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </a>\n" +
                            "            </li>");
                    });

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

            });
        }
    });
</script>

基本Li里面的数据需要根据自己的逻辑去拼接字符串，就到这里吧！