LayUI流加载的基本使用

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

首先在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;
	}
}

页面加载效果如下：

加载完成后：