Back to Layui

Options

docs/flow/detail/options.md

2.13.62.7 KB
Original Source
<table class="layui-table"> <colgroup> <col width="150"> <col> <col width="100"> <col width="100"> </colgroup> <thead> <tr> <th>属性名</th> <th>描述</th> <th>类型</th> <th>默认值</th> </tr> </thead> <tbody> <tr> <td>elem</td> <td>

绑定元素选择器或 DOM 对象

</td> <td>string</td> <td>-</td> </tr> <tr> <td>scrollElem</td> <td>

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

</td> <td>string</td> <td>

document

</td> </tr> <tr> <td>isAuto</td> <td>

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

</td> <td>boolean</td> <td>

true

</td> </tr> <tr> <td>moreText <sup>2.9.11+</sup></td> <td>

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

</td> <td>string</td> <td>

<code style="font-size: 13px;">加载更多</code>

</td> </tr> <tr> <td>end</td> <td>

设置加载完毕后的最尾部的内容,可传入任意 HTML 字符。

</td> <td>string</td> <td>

<code style="font-size: 13px;">没有更多了</code>

</td> </tr> <tr> <td>isLazyimg</td> <td>

是否开启信息流中的图片懒加载。若设为 true ,则只会对在可视区域的图片进行按需加载。但同时,在拼接列表字符的时候,您不能给列表中的 `` 标签赋值 src,必须要用 lay-src 属性取代,如:

layui.each(data, function(index, item){
  lis.push('<li></li>');
});  
</td> <td>boolean</td> <td>

false

</td> </tr> <tr> <td>mb</td> <td>

与底部的临界距离。 即当滚动条与底部产生该距离时,触发加载。 必须 isAuto:true 时有效。

小贴士: 此处 mb 属性名是 css 中 margin-bottom 的简写,可并非国粹之语 😅

</td> <td>number</td> <td>

50

</td> </tr> <tr> <td>direction <sup>2.9.7+</sup></td> <td>

指定触发加载的方向,可选值:

  • bottom 滚动容器底部触发加载
  • top 滚动容器顶部触发加载
</td> <td>string</td> <td>'bottom'</td> </tr> <tr> <td>done</td> <td colspan="3"> <div id="options.done" lay-pid="options" class="ws-anchor"> 滚动条到达临界点触发加载的回调函数。函数返回的参数如下: </div>
done: function(page, next){
  console.log(page) // 获得当前页
  
  // 执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
  // 只有当前页小于总页数的情况下,才会继续出现加载更多
  next('列表 HTML 片段', page < res.pages); 
}

详细用法可参考:#示例

</td> </tr> </tbody> </table>