美文网首页
使用layui的流加载

使用layui的流加载

作者: riyihu | 来源:发表于2018-12-27 19:13 被阅读0次

html js

<ul class="flow-default layui-btn-container"  id="allGoods"></ul> //放置列表的容器
<script>
  layui.use(['form','layer','flow'], function(){
   var layer = layui.layer;
   var flow = layui.flow;
   $ = layui.jquery;
   
  flow.load({
      elem: '#allGoods' //指定列表容器
      ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
        var lis = [];
        //以jQuery的Ajax请求为例,请求下一页数据
        $.get('/allGoods/?page='+page, function(res){
                layui.each(res.data, function(index, item){
                  lis.push('<a href="/curExam/'+item.id+'"><li class="layui-btn" data-id="'+item.id+'">'+ item.name +'</li></a>');
                }); 
                
                //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
                //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
                next(lis.join(''), page < res.last_page);
        });
      }
  });

 

  });

php

public function allGoods()
{
        $perPage = 5;
        $exams = GoodsModel::query()->select('id','name')->orderBy('id','desc')->paginate($perPage);
        return $exams;
}

ok

相关文章

网友评论

      本文标题:使用layui的流加载

      本文链接:https://www.haomeiwen.com/subject/nvudlqtx.html