layui框架的flow组件常见用法总结-木庄网络博客

本文摘自PHP中文网，作者尚，侵删。

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

一、信息流加载

信息流加载的核心方法时 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>