LayUI流加载的基本使用

最近写了一个个人博客项目，博客显示用的LayUI流加载实现的。这里整理一下吧。流加载的原理其实和分页一样，每次加载一页的数据显示，只是加载的方式不同。LayUI流加载的官方文档地址：

首先在HTML页面中定义一个存放加载内容的标签（页面样式可以根据自己需求进行调试）:

<ul class="flow-default" id="LAY_demo1"></ul>

使用JS根据上面给定的标签，渲染插入数据。代码如下。

layui.use(flow, function(){
  var flow = layui.flow;
 
  flow.load({
    elem: #LAY_demo1, //流加载容器
    scrollElem: #LAY_demo1, //滚动条所在元素，一般不用填
    done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
            var lis = [];
            //数据请求地址，page，第几页，默认page是从2开始返回
            $.post(blog/fysj2,{page:page},function(res){
        	layui.each(res.data, function(index, item){
        		//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //流加载插入内容部分，根据自己需求更改，这里做的案例，所以就写的比较简单
 	            lis.push("<div class=list-group><a href=# class=list-group-item onclick=details("+item.id+")>"+
 	                		"<h4 class=list-group-item-heading>"+item.title+"</h4><p class=list-group-item-text>"
 	                		+item.user.nickname+"   |   "+item.createDate+
 	                		"</p></a>"+
 	                		"</div>");
 	          }); 	   	       
             //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(), page < res.pages); //假设总页数为 10
            $([data-toggle="tooltip"]).tooltip()
        });  
      });
    }
  });

后台请求响应方法。分页查询，查询完返回给前台

@RequestMapping(value="/fysj")
@ResponseBody
public Object fysj(Integer page, BlogsForm form) {
	Sort sort=Sort.by(Sort.Direction.DESC, "updateDate");
	//分页，页数从0开始的，所以需要-1，每页10条数据
	Pageable pageable = PageRequest.of(page-1, 10, sort);
	Page<Blogs> blog;
	//查询
	Specification<Blogs> spec = buildSpec2(form);
	blog = blogService.findAll(spec, pageable);
	return FlowloadUtils.buildResult(blog);
}

返回的JSON数据类型工具类FlowloadUtils：

public class FlowloadUtils {

	public static HashMap<String, Object> buildResult(Page page) {
		HashMap<String, Object> result=new HashMap<>();
		result.put("code", 0);
		result.put("msg","");
		result.put("pages", page.getTotalPages());
		result.put("data", page.getContent());
		return result;
	}
}

页面加载效果如下：

加载完成后：