下面以一个图片列表滚动加载为案例
html代码
<div class="flow-default" id="LAY_demo1"> </div> //html页面中定义一个容器
引用layui官网下载的css和js
js代码
$(document).ready(function(){
layui.use('flow', function(){
var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
var flow = layui.flow;
flow.load({
elem: '#LAY_demo1', //指定列表容器
done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
//页数
//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
$.getJSON(prjName +'/clothingList/getSuitJtList?page='+page, function(data){
var lis = [];
layui.each(data.data, function(index, item){
var html="";
html+=
'<a href="../clothinglist/clothing_detail.html?jtSuitId='+item.jtSuitId+'&suitName='+item.suitName+'">'+
'<div class="layui-col-md4">'+
'<div style="width: 400px;height:200px;background-color:white;border: 1px solid #999999;margin-bottom: 10px;margin-left: 10px; " > '+
'<img alt="" src="'+staticPath+'/'+item.imageUrl+'" width="400px" height="150px" >'+
'<div style="text-align: left;font-size: 13px"><span style="height: 8px;">'+(item.suitName==null?"-":item.suitName)+'<br>'+(item.suitDesc==null?"-":item.suitDesc)+'</span></div>'+
'</div>'+
'</div>'+
'</a>';
//html+='<div class="layui-col-md4">'+''+' </div>';
lis.push(html);
});
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
//count是从后台取的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
next(lis.join(''), page < data.count );
});
}
});
});
});
后台代码：
String page=request.getParameter("page"); //获取前台传过的页数
Integer limit=12;//每页有多少数据
把page和limit传到后台分页列显方法中去
@JsonIgnore
public Integer getStart(){
return (page-1) * limit;
}
js中的data.count是列表中的总页数
//查询数据总数
int count=clothingListService.querySuitJtCount();
//计算总页数
int totalPage = count / limit;
if (count % limit != 0) {
totalPage++;
}
list.setCount(totalPage);