Summary of common usage of flow components of layui framework

This module includes two core supports: Information flow loading and Image lazy loading. It is of great performance help for both the server and front-end experience. The methods of using these two technologies are given below:

1. Information flow loading

The core method of information flow loading is flow.load(options), Below is a chestnut that simulates loading a news list

Front-end html and 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(&#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">木有了</p>&#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;</li>&#39;);
                        });
                        next(lis.join(&#39;&#39;), page < res.pages);//pages是后台返回的总页数
                    });
                }
            });
        });
    </script>

Backend server code

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);
        }
    }

2. Lazy loading of pictures

Lazy loading of images in layui is very simple, just replace the src attribute of the image with lay-src, and then call the flow.lazyimg() method

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

For more layui knowledge, please pay attention layui usage tutorial column.

The above is the detailed content of Summary of common usage of flow components of layui framework. For more information, please follow other related articles on the PHP Chinese website!