layui滚动加载

时间:2024-04-05 13:27:03

下面以一个图片列表滚动加载为案例

layui滚动加载

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);