Layui的流加载，懒加载

ゝ一世哀愁。 2022-05-20 08:37 310阅读 0赞

一直想使用流加载，加载信息，感觉很酷。但是一直又不想去学，学的东西都太杂了，选择了一下决定使用layui的流加载。

一个最简单的流加载代码如下（你复制过去之后，一定要把layui.css 和 layui.js改成你本地自己的）

注：

1、你会发现下面这个代码配置的是自动加载，但是还是出现了手动加载，是因为开始的个数不够一页的。当个数达到了一页，就会是自动加载了。

2、默认的“一叶”对比标准的对你的整个页面，如果你所做的是一小块的话，有个参数可以设置的。最后会给出所以参数配置。

3、下面这个代码是信息流，没有使用图片懒加载，我个人用不上，有兴趣的可以自行去了解。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layui</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
      <link rel="stylesheet" href="css/layui.css" />
      <script type="text/javascript" src="js/layui.all.js" charset="utf-8"></script>
    </head>
    <body>
               
    <ul class="flow-default" id="LAY_demo1"></ul>
     
    <script>
    	layui.use('flow', function(){
    	  var flow = layui.flow;
    	 
    	  flow.load({
    	    elem: '#LAY_demo1' //流加载容器
    	    ,done: function(page, next){ //执行下一页的回调
    	      //模拟数据插入
    	      //每次滑动到了底部度会执行这个函数
    	      setTimeout(function(){
    	        var lis = [];
    	        for(var i = 0; i < 8; i++){
    	          lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
    	        }
    	      
    	        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
    	        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
    	        next(lis.join(''), page < 10); //假设总页数为 10
    	        //最后这个数字，是表示每次加载所用的时间。
    	      },1500);
    	    }
    	  });
    	});
    </script>
    
    </body>
    </html>

基本都是使用的默认配置。

下面给出全部的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220520/477721d43ba34dcc98b38d09ef637782.png