html js
<ul class="flow-default layui-btn-container" id="allGoods"></ul> //放置列表的容器
<script>
layui.use(['form','layer','flow'], function(){
var layer = layui.layer;
var flow = layui.flow;
$ = layui.jquery;
flow.load({
elem: '#allGoods' //指定列表容器
,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
var lis = [];
//以jQuery的Ajax请求为例,请求下一页数据
$.get('/allGoods/?page='+page, function(res){
layui.each(res.data, function(index, item){
lis.push('<a href="/curExam/'+item.id+'"><li class="layui-btn" data-id="'+item.id+'">'+ item.name +'</li></a>');
});
//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < res.last_page);
});
}
});
});
php
public function allGoods()
{
$perPage = 5;
$exams = GoodsModel::query()->select('id','name')->orderBy('id','desc')->paginate($perPage);
return $exams;
}
ok
网友评论