流加载

流加载 flow 是用于在信息流和图片列表场景中的滚动按需加载，对前后端的体验和性能优化具有一定帮助。

示例

滚动加载

  <div class="flow-demo" id="ID-flow-demo"></div>
<!-- import layui --> 
<script>
layui.use(function(){
  var flow = layui.flow;
  // 流加载实例
  flow.load({
    elem: '#ID-flow-demo', // 流加载容器
    scrollElem: '#ID-flow-demo', // 滚动条所在元素，一般不用填，此处只是演示需要。
    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
      }, 520);
    }
  });
});
</script>

手动加载

  <div class="flow-demo" id="ID-flow-demo-manual"></div>
<!-- import layui --> 
<script>
layui.use(function(){
  var flow = layui.flow;
  // 流加载实例
  flow.load({
    elem: '#ID-flow-demo-manual', // 流加载容器
    scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
    isAuto: false,
    isLazyimg: true,
    done: function(page, next){ // 加载下一页
      // 模拟插入
      setTimeout(function(){
        var lis = [];
        for(var i = 0; i < 6; i++){
          lis.push('<li><img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
        }
        next(lis.join(''), page < 6); // 假设总页数为 6
      }, 520);
    }
  });
});
</script>

API

API	描述
var flow = layui.flow	获得 `flow` 模块。
flow.load(options)	信息流加载，核心方法。
flow.lazyimg(options)	图片懒加载。

信息流

flow.load(options);

参数 options : 基础属性配置项。#详见属性

信息流是分页的另一种表现形式，新加载的内容不替换原有的内容，而是随着滚动条滚动而追加显示。#详见示例

属性

属性名	描述	类型	默认值
elem	绑定元素选择器或 DOM 对象	string	-
scrollElem	指定触发流加载的滚动条所在元素选择器。	string	`document`
isAuto	是否自动加载。若设为 `false`，则会在列表底部生成一个「加载更多」的按钮，那么可点击该按钮加载下一页数据。	boolean	`true`
end	设置加载完毕后的最尾部的内容，可传入任意 HTML 字符。	string	`没有更多了`
isLazyimg	是否开启信息流中的图片懒加载。若设为 `true` ，则只会对在可视区域的图片进行按需加载。但同时，在拼接列表字符的时候，您不能给列表中的 `<img>` 标签赋值 `src`，必须要用 `lay-src` 属性取代，如： `layui.each(data, function(index, item){ lis.push('<li><img lay-src="'+ item.src +'"></li>'); });`	boolean	`false`
mb	与底部的临界距离。即当滚动条与底部产生该距离时，触发加载。必须 `isAuto:true` 时有效。小贴士：此处 `mb` 属性名是 css 中 `margin-bottom` 的简写，可并非国粹之语 😅	number	`50`
direction ^2.9.7+	指定触发加载的方向，可选值： `bottom` 滚动容器底部触发加载 `top` 滚动容器顶部触发加载	string	'bottom'
done	滚动条到达临界点触发加载的回调函数。函数返回的参数如下： `done: function(page, next){ console.log(page) // 获得当前页 // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页 // 只有当前页小于总页数的情况下，才会继续出现加载更多 next('列表 HTML 片段', page < res.pages); }` 详细用法可参考：#示例

图片懒加载

flow.lazyimg(options);

参数 options : 属性配置项。可选项见下表。

属性名	描述
elem	绑定容器中需进行懒加载的图片元素选择器
scrollElem	滚动条所在元素选择器，默认 `document` 。

  <div class="flow-demo-lazyimg" id="ID-flow-demo-lazyimg">
  <!-- <img src="占位图地址" lay-src="图片实际地址"> -->
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
  <img lay-src="https://unpkg.com/outeres@0.0.11/demo/wallpaper.jpg">
</div>
<!-- import layui --> 
<script>
layui.use('flow', function(){
  var flow = layui.flow;
  // 图片懒加载
  flow.lazyimg({
    elem: '#ID-flow-demo-lazyimg img',
    scrollElem: '#ID-flow-demo-lazyimg' // 一般不用设置，此处只是演示需要。
  });
});
</script>

无论滚动条上滑还是下滑，都会始终加载当前屏的图片。