layui流加载,信息流,滚动加载,网站瀑布流,下拉加载分页

源码技巧5年前 (2020-09-15)14300

layui流加载使用说明:https://www.layui.com/doc/modules/flow.html

实例如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
            
<ul id="demo">
  <li>1</li>
  <li>2</li>
  ……
  <li>6</li>
</ul>
          
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.min.js"></script>

<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('flow', function(){
  var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
  var flow = layui.flow;
  flow.load({
    elem: '#demo' //指定列表容器
    ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
      var lis = [];
      //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
      $.get('/api/list?page='+page, function(res){
        //假设你的列表返回在data集合中
        layui.each(res.data, function(index, item){
          lis.push('<li>'+ item.title +'</li>');
        });
        
        //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
        //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
        next(lis.join(''), page < res.pages);    
      });
    }
  });
});
</script>

</body>
</html>


“layui流加载,信息流,滚动加载,网站瀑布流,下拉加载分页” 的相关文章

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。