流加载

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

示例

滚动加载

  

手动加载

  

API

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

信息流

flow.load(options);

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

属性

属性名 描述 类型 默认值
elem

绑定元素选择器或 DOM 对象

string -
scrollElem

指定触发流加载的滚动条所在元素选择器。

string

document

isAuto

是否自动加载。 若设为 false,则会在列表底部生成一个「加载更多」的按钮,那么可点击该按钮加载下一页数据。

boolean

true

moreText 2.9.11+

设置「加载更多」按钮的文本

string

加载更多

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
  

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