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