thinkphp6配合Layui實現(xiàn)流加載

thinkphp6代碼

// 渲染首頁
public function index()
{
    return View::fetch();
}
// 準(zhǔn)備流數(shù)據(jù)
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){ //到達(dá)臨界點(diǎn)（默認(rèn)滾動觸發(fā)），觸發(fā)下一頁
            var lis = [];
            //以jQuery的Ajax請求為例，請求下一頁數(shù)據(jù)（注意：page是從2開始返回）
            $.get('/index/index/list?page='+page, function(res){
                //假設(shè)你的列表返回在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>");
                    });

                    //執(zhí)行下一頁渲染，第二參數(shù)為：滿足“加載更多”的條件，即后面仍有分頁
                    //pages為Ajax返回的總頁數(shù)，只有當(dāng)前頁小于總頁數(shù)的情況下，才會繼續(xù)出現(xiàn)加載更多
                    next(lis.join(''), page < res.last_page);
                }

            });
        }
    });
</script>

基本Li里面的數(shù)據(jù)需要根據(jù)自己的邏輯去拼接字符串，就到這里吧！