layui - 流加载

模块:layui.use( 'flow', function(){ var flow=layui.flow; } )

核心方法
layui.use( 'flow', function(){
  var flow=layui.flow;
  flow.load(options);   /*信息流*/
  flow.lazyimg(options);   /*图片懒加载*/
} )

参考:https://www.layui.com/doc/modules/flow.html

 

信息流:

信息流即异步逐页渲染列表元素,简单示例:

<!-- 列表已存在,初始显示: -->
<ul id="demo">
  <li>1</li>
  <li>2</li>
  <!-- ... -->
  <li>6</li>
</ul>

<script>
  // 加载更多--显示余下列表:
  layui.use('flow', function(){
    var $ = layui.jquery;
    var flow = layui.flow;
    flow.load({
      elem:'demo',
      done:function(page,next){
        // console.log(page) //获得当前页
        // 执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
        // 只有当前页小于总页数(如res.pages)的情况下,才会继续出现加载更多
        // next('列表HTML片段', page < res.pages);
        var lis = [];
        for(var i = 0; i < 8; i++){
          lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>');  // 拼接列表字符
        }
        next(lis.join(''), page < 10);
      }
    });
  });
</script>

参数:

elem      指定列表容器的选择器
scrollElem      滚动条所在元素选择器,默认document 即总窗口,若要通过某一容器滚动触发加载设定此参数即可
isAuto      是否自动加载,默认true,设置false需点击底部生成的 加载更多 按钮加载下一页
end      显示末页内容,可传入任意HTML字符,默认“没有更多了”
isLazyimg      是否开启图片懒加载,默认false,设置为true则只对可视区域按需加载 且拼接列表字符时img路径用lay-src,如 lis.push('<li><img lay-src="'+ item.src +'"></li>');
mb      与底部的临界距离,默认50,滚动条到底部距离到该数字时触发加载,只在isAuto为true时有效
done      到达临界点触发加载的回调,是function(){},有两个参数page和next,格式参考上方示例

 

图片懒加载:

对页面中的全部带有lay-src的img或其他指定的相关img元素开启懒加载,简单示例:

<div class="layui-card">
  <div class="layui-card-header">图片懒加载</div>
  <div class="layui-card-body">
    <div class="site-demo-flow" id="test-flow-lazyimg">
      <img lay-src="https://f.msup.com.cn/2aeffe81621e61bf096da2f542b731b0.png">
      <img lay-src="https://f.msup.com.cn/2aeffe81621e61bf096da2f542b731b0.png">
      <!-- ...... -->
      <img lay-src="https://f.msup.com.cn/2aeffe81621e61bf096da2f542b731b0.png">
    </div>
  </div>
</div>

<script>
  layui.use('flow', function(){
    var flow = layui.flow;
    flow.lazyimg({
      elem: '#test-flow-lazyimg img'
      ,scrollElem: '#test-flow-lazyimg' // 此处以#test-flow-lazyimg做容器并以其滚动条触发加载
    });
  });
</script>

参数:

elem      指定开启懒加载的img元素选择器
scrollElem      滚动条所在元素选择器,默认document 即总窗口,若要通过某一容器滚动触发加载 设定此参数即可

 

已标记关键词 清除标记
1、首先筛选是通过下面ajax追加数据的 $.ajax({ type:"post", url:"http://127.0.0.0:8080/api/data", dataType:'json',//text,json,html data: {"income_bands":income_bands, "stars":stars, "sexs":sexs, "min_ages":min_ages,"max_ages":max_ages, "min_kmh_scores":min_kmh_scores,"max_kmh_scores":max_kmh_scores, "min_zj_scores":min_zj_scores,"max_zj_scores":max_zj_scores},//需要向后台传的数据格式,start为字典的key值,即后台接受的数据id success:function(result){ var contents =""; $("#contents").empty();//先清空 for (var i=0;i<result.length;i++){ $("#contents").append("<li style=\"border-bottom:1px #f3f3f3 solid;\"><a href=\"http://www.htmlsucai.com/\"> "+result[i][0] +"</a></br><a style=\"color:#BFBFBF;\"">"+result[i][1] +"</a></br><a style=\"color:#BFBFBF;\">"+result[i][2] +"</a></br><a style=\"color:#BFBFBF;\">"+result[i][3] +"</a></br><a style=\"color:#BFBFBF;\">"+result[i][4]+"</a></li>"); }; }, error:function(result){ alert("未查询到数据."); } 2、然后用另一个ajax进行数据加载: <script> var pageSize = 10; var pageIndex = 0; layui.use('flow', function () { var $ = layui.jquery; var flow = layui.flow; flow.load({ elem: '#contents',//存放每条数据的容器 done: function (pageIndex, next) { //到达临界点(默认滚动触发),触发下一页 var lis = []; //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回) $.ajax({ type: "POST", url: "http://127.0.0.0:8080/api/all_data_page", dataType:'json',//text,json,html data: { "income_bands":income_bands, "stars":stars, "sexs":sexs, "min_ages":min_ages,"max_ages":max_ages, "min_kmh_scores":min_kmh_scores,"max_kmh_scores":max_kmh_scores, "min_zj_scores":min_zj_scores,"max_zj_scores":max_zj_scores, pageSize: pageSize, pageIndex: pageIndex }, success: function (data) { pageIndex = data[1][0]; //服务端返回的json字符必须包含pageIndex和pageCount属性,pageIndex表示页码,pageCount是总页数 for (var i = 0; i < data[0].length; i++) { var d = "<li style=\"border-bottom:1px #f3f3f3 solid;\"><a href=\"http://www.htmlsucai.com/\">"+data[0][i][0] +"</a></br><a style=\"color:#BFBFBF;\">"+data[0][i][1] +"</a></br><a style=\"color:#BFBFBF;\">"+data[0][i][2] +"</a></br><a style=\"color:#BFBFBF;\">">"+data[0][i][3] +"</a></br><a style=\"color:#BFBFBF;\">"+data[0][i][4]+"</a></li>"; lis.push(d);//每条数据都压入数组,LayUI会自动将每条信息插入Html的ID为#contents的元素 } **alert(lis.join(''))**; //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页 //只有当前页小于总页数的情况下,才会继续出现加载更多 next(lis.join(''), pageIndex < data[1][1]); } }); } }); }); </script> 在上面可以看到数据是压缩进了lis里面了,但是没有被渲染出来,求助各位大神怎么解?????
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页