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

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

一、信息流加载

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

前端html和js

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

后台服务器代码

public class HomeController : Controller     {         // GET: Home         public ActionResult Index()         {             return View();         }         public ActionResult GetList(int page)         {            //简单数据库中新闻             List<string> newsList = new List<string>();             for (int i = 0; i < 55; i++)             {                 newsList.Add("新闻" + i);             }            //总页数             int pages =(int) Math.Ceiling((double)55 / 10); 　　　　　　　//模拟分页             var data= newsList.Skip<string>((page - 1) * 10).Take(10);             return Json(new { data,pages},JsonRequestBehavior.AllowGet);         }     }

二、图片懒加载

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

layui.use('flow', function(){   var flow = layui.flow;   //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载     flow.lazyimg();    //方式一，全部懒加载     flow.lazyimg({     //方式二，特定容器懒加载     elem:'#box1'      //不设置elem，对页面中所有图片进行懒加载     ，scrollElem:document     })  });

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

以上就是layui框架的flow组件常见用法总结的详细内容，更多内容请关注技术你好其它相关文章！