Layui的流加载\懒加载 Ajax的jQuery方法

最新推荐文章于 2024-07-15 08:33:20 发布

xmm的博客

最新推荐文章于 2024-07-15 08:33:20 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： layui流加载

本文链接：https://blog.csdn.net/weixin_44900831/article/details/100090097

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 //layui的懒加载
    layui.use('flow', function(){
        var $ = layui.jquery;//不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.load({//信息流
            elem: '.commentList' //流加载容器
            ,isAuto:true //是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
            ,done: function(page, next){ //执行下一页的回调
                //请注意：layui 1.0.5 之前的版本是从第2页开始返回，也就是说你的第一页数据并非done来触发加载（为之前这个愚蠢的设计表示抱歉）
                //从 layui 1.0.5 的版本开始，page是从1开始返回，初始时即会执行一次done回调。
                //console.log(page) //获得当前页
                var lis = [];
                $.ajax加粗样式({
                    url : "/api/assess/list",//不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                    type : "post",
                    dataType : "json",
                    data:{
                        'commodityId':commodityId,
                        "page.currentPage":page
                    },
                    success:function (res){
                        if(res.success){
                            var commentListHtml = '';
                            //列表返回在res.entity.courseAssessList集合中
                            layui.each(res.entity.courseAssessList, function(index, item){
                                commentListHtml += '<li class="layui-col-xs12 layui-row pt10 pb10 bgfff mb10 pl20 pr20">' +
                                    '<div class="layui-col-xs12 layui-row ">' +
                                    '<div class="layui-col-xs6 layui-row">';
                                if (item.nickName == null || item.nickName == ''){
                                    commentListHtml += '<img src="${ctx}/static/mobile/img/icon/evaluateNormalPerson.png" alt="" class="width30 h30 vMiddle radius50">'
                                } else if(item.nickName != null || item.nickName != ''){
                                    commentListHtml += '<img src="'+item.avatar+'" alt="" class="width30 h30 vMiddle radius50">'
                                }
                                if(item.nickName == null || item.nickName == ''){
                                }else {
                                    commentListHtml += '<span class="color313131 font12 ml5">'+item.nickName+'</span>';
                                }
                                commentListHtml += '</div>' +
                                    '<div class="layui-col-xs6 alignR h35 line35">' +
                                    '<span class="font12 color999">'+item.createTime+'</span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="layui-col-xs12 evaluateContent mt10">' +
                                    '<div class="h30 line15 overflow font14 color545454 layui-col-xs12">'+item.content+'</div>' +
                                    '<div class="layui-col-xs12">';
                                if(item.image1 != null && item.image1 != ''){
                                    commentListHtml +='<img src="'+item.image1+'" alt="" class="width80 h80 radius10 mt10 mr20">';
                                }
                                if (item.image2 != null && item.image2 != ''){
                                    commentListHtml +='<img src="'+item.image2+'" alt="" class="width80 h80 radius10 mt10 mr20">';
                                }
                                if (item.image3 != null && item.image3 != ''){
                                    commentListHtml += '<img src="'+item.image3+'" alt="" class="width80 h80 radius10 mt10">';
                                }
                                commentListHtml +='</div>' +
                                    '</div>' +
                                    '</li>'
                            });
                            lis.push(commentListHtml);
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            //page默认为1
                            next(lis.join(''), page < res.entity.page.totalResultSize%10);
                        }
                    }
                });
            }
        });
    });