LayUI流加载的基本使用

我会带着你远行 2022-01-07 20:21 1117阅读 0赞

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

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

使用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;
    	}
    }

页面加载效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

加载完成后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

[https_www.layui.com_doc_modules_flow.html]: https://www.layui.com/doc/modules/flow.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20211220/6c62df3401ad43088a2a7906a85214ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20211220/f5d1169db9c845d8b6edb5808ab164df.png