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里面的數據需要根據自己的邏輯去拼接字符串，就到這里吧！