layui框架的flow组件常见用法总结

该模块包含 信息流加载 和  图片懒加载  两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。下边分别给出了这两种技术的使用方法：

一、信息流加载

信息流加载的核心方法时  flow.load(options) ，下边给了一个模拟加载新闻列表的栗子

前端html和js

        <script></script>    <script> layui.use(&#39;flow&#39;, function () { var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。 var flow = layui.flow; flow.load({ elem: &#39;#newsList&#39; //指定列表容器 , isAuto: false //到底页面底端自动加载下一页，设为false则点击&#39;加载更多&#39;才会加载 //, mb: 100 //距离底端多少像素触发auto加载 , isLazying: true //当单个li很长时，内部有很多图片，对图片进行懒加载，默认false。 , end: &#39;<p style="color:red">木有了&#39; //加载所有后显示文本，默认&#39;没有更多了&#39; , done: function (page, next) { //到达临界，触发下一页 var lis = []; $.get(&#39;/Home/GetList?page=&#39; + page, function (res) { //假设你的列表返回在data集合中 layui.each(res.data, function (index, item) { lis.push(&#39;<li>&#39; + item + &#39;&#39;); }); next(lis.join(&#39;&#39;), page < res.pages);//pages是后台返回的总页数 }); } }); }); </script>

后台服务器代码

二、图片懒加载

layui中的图片懒加载十分简单，将图片的src属性替换为lay-src，然后调用  flow.lazyimg() 方法即可

更多layui知识请关注layui使用教程栏目。