layui flow 流加载 笔记

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了layui flow 流加载 笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1399字，纯文字阅读大概需要2分钟。

内容图文

layui flow 流加载

layui的流加载，用于向下滑动再次获取数据

<div class="list2" style="margin-bottom: 40px;" id="demo">

<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开始返回）
              $.post(ctx + 'api/policyInformation/wxList?page=' + page  + '&size=' + 7, function(res){
                  //假设你的列表返回在data集合中
                  layui.each(res.data, function(index, item){
                      var imgUrl = item.previewPath
                      if (!imgUrl) {
                          imgUrl = '/mobile/images/not_project.png'
                      }
                      var title = item.title
                      if (title.length > 16) {
                          var title = title.slice(0, 16) + "..."
                      }
                      lis.push(
                          '<div class="b1" id="item' + index +'">' +
                          '<div class="l1"><img src="'+ imgUrl +'" style="width: 100%; height: 100%;"></div>' +
                          '<div class="l2">' +
                          '<div class="p1">'+ title +'</div>' +
                          '<div class="p3" style="font-size: 14px;">了解详情</div>'+
                          '</div>'+
                          '</div>');
                      // 点击跳转
                      $(document).on('click', '#item' + index, function() {
                          window.location.href = ctx + 'wx/policyInformation/detail?id=' + item.id
                      })
                  });

                  //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                  //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                  next(lis.join(''), page < res.totalPages);
              });
          }
      });
  });
</script>

内容总结

以上是互联网集市为您收集整理的layui flow 流加载 笔记全部内容，希望文章能够帮你解决layui flow 流加载 笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---