登录

没有账号?快速注册
合作账号登录

文章资讯 News每一个设计作品都举世无双

当前位置:主页 > 文章资讯 > 专业问答 > layui 流加载(下拉加载)

layui 流加载(下拉加载)

日期:2018-12-18 / 人气:83    分享到:

该模块包含信息流加载图片懒加载两大核心支持,无论是对服务端、还是前端体验,都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了,但不妨现在开始,体验一下Layui更为简单和高效的Flow吧。


模块加载名称:flow


第一步引入js文件

<link href="/layui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/layui.all.js"></script>


第二步布局

<div class="contian">
      <div class="content">
            <div class="lr flow-default"></div>
        </div>
    </div>


第三步js


var openid = "{$openid}";

   var token = "{$token}";

   var page = 1;

   layui.use('flow', function () {

        var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。

        var flow = layui.flow;

        flow.load({

            elem: '.lr' //指定列表容器

            , isAuto:true,

            scrollElem: '.lr',done: function (page,next) {

               var url = "接口地址";

             //传递的参数

                var data = {

                    openid: openid,

                    token: token,

                    page: page

                }

                var lis = [];

                $.get(url, data, function (params) {

                    var list = params.list;

                    var sum = params.count_page;

                    var list1 = '';

                   var word = "要跳转的html";

                    for (var index = 0; index < list.length; index++) {

                        var l = list[index];

                     lis.push('<a href="'+word +'" style="background: #fff;" class="lr1 clearfix">' +

                            '<img id="img" src="' + l.pic_url + '" alt="">' +

                            '<div class="zj clearfix">' +

                            '<span class="keer">' + l.author + '</span>' +

                            '<span class="keer1">' +

                            '<img id="img1" src="{:C('WEIXIN_IMAGE')}yan.png" alt="">' +

                                '<span id="pp">' + l.view + '</span>' +

                                '</span>' +

                                '</div>' +

                                '<div class="pi clearfix">' +

                                '<span>' + l.title + '</span>' +

                                '</div>' +

                                '</a>')

                      

                    }

                   

                    //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页

                    //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多

                    next(lis.join(''), page < sum);

                });

            }

});


编辑:墨阁网络工作室