layui框架的flow组件的核心用法有哪些？

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

一、信息流加载

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

前端html和js

后台服务器代码

public class HomeController : Controller    {        // GET: Home        public ActionResult Index()        {            return View();        }        public ActionResult GetList(int page)        {           //简单数据库中新闻            List newsList = new List();            for (int i = 0; i < 55; i++)            {                newsList.Add("新闻" + i);            }           //总页数            int pages =(int) Math.Ceiling((double)55 / 10);　　　　　　　//模拟分页            var data= newsList.Skip((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框架的flow组件常见用法总结的详细内容，更多请关注其它相关文章！