Layui的流加载，懒加载

一直想使用流加载，加载信息，感觉很酷。但是一直又不想去学，学的东西都太杂了，选择了一下决定使用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>

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

下面给出全部的配置

Layui的流加载，懒加载

猜你喜欢