Résumé de l'utilisation courante des composants de flux du framework layui

Ce module comprend deux supports principaux : le chargement du flux d'informations et le chargement différé des images, qui sont d'une grande aide en termes de performances pour l'expérience serveur et frontale. Les méthodes d'utilisation de ces deux technologies sont indiquées ci-dessous :

1. Chargement du flux d'informations

La méthode principale de chargement du flux d'informations est flow.load(options), ci-dessous. est un exemple de simulation de chargement d'une liste d'actualités

Front-end html et 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>

Code du serveur backend

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

Chargement paresseux des images

Le chargement paresseux des images dans layui est très simple, il suffit de remplacer l'attribut src de l'image par lay-src, puis d'appeler la méthode flow.lazyimg()

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

Pour plus de layui connaissances, veuillez faire attention

Tutoriel d'utilisation de Layui colonne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!