Layui 프레임워크의 흐름 구성요소의 일반적인 사용법 요약

이 모듈에는 "정보 흐름 로딩"과 "이미지 지연 로딩"이라는 두 가지 핵심 지원이 포함되어 있으며, 이는 서버와 프런트엔드 경험 모두에 탁월한 성능 도움을 줍니다. 이 두 가지 기술을 사용하는 방법은 다음과 같습니다.

1. 정보 흐름 로딩

정보 흐름 로딩의 핵심 방법은 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(&#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>

백엔드 서버 코드

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. 이미지 지연 로딩

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 프레임워크의 흐름 구성요소의 일반적인 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!