TP6+Layui Flow 实现信息流加载

2,865次阅读
一条评论

该文章最后更新于2024-04-25 10:44,某些内容具有时效性,若有错误或已失效,请谅解!

引用一下layui官网的信息流概念:

信息流即异步逐页渲染列表元素,这是你页面已经存在的一段列表,你页面初始时只显示了6个

//HTML
<ul id="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

你想通过加载更多来显示余下列表,那么你只需要执行方法:flow.load(options) 即可

//javascript
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);    
      });
    }
  });
});

下面开始介绍我的方法:

1、列表首次打开默认加载6条数据

2、点击加载更多按钮,触发加载更多,再次加载6条新的数据

3、如此循环,直到判断最后一次请求的数据不足6条时,则把剩余数据加载出来并显示没有更多了。

<script>
    layui.use('flow', function(){
        var flow = layui.flow;
        var $ = layui.jquery;
        //手动点击加载下一页
        flow.load({
            elem: '#centerlist' //流加载容器
            ,scrollElem: '#centerlist' //滚动条所在元素,一般不用填,此处只是演示需要。
            ,isAuto: false     //自动加载  为true的时候是自动加载
            ,isLazyimg: true   //图片懒加载
            ,end:'<div class="text-center"><button class="btn btn-simples">没有更多了</button></div>'
            ,done: function(page, next){ //加载下一页
                setTimeout(function(){
                    $.get(
                        "{:url('index/datalist')}",
                        {page:page},
                        function(d){
//                      console.log(d);
                            var lis = [];
                            layui.each(d.res, function(index, item){  //遍历后台传过来的数据
                                var html =
                                '<div class="post post-list clearfix">'
                                +  '<div class="thumb rounded">'
                                +  '<span class="post-format-sm">'
                                +  '<i class="icon-picture"></i>'
                                +  '</span>'
                                +  '<a href="'+item.url+'">'
                                +  '<div class="inner">'
                                +  '<img class="zuixin" src="'+item.thumb+'" alt="post-title">'
                                +  '</div>'
                                +  '</a>'
                                +  '</div>'
                                +  '<div class="details">'
                                +  '<ul class="meta list-inline mb-3">'
                                +  '<li class="list-inline-item"><a href="../about.html"><img class="yuanava" src="{$config.portrait}" class="author" alt="author"/> {$config.linkman}</a></li>'
                                +  '<li class="list-inline-item"><a href="'+item.listurl+'">'+item.category_name+'</a></li>'
                                +  '<li class="list-inline-item">'+item.update_time+'</li>'
                                +  '</ul>'
                                +  '<h5 class="post-title"><a href="'+item.url+'">'+item.title+'</a></h5>'
                                +  '<p class="excerpt mb-0">'+item.description+'</p>'
                                +  '<div class="post-bottom clearfix d-flex align-items-center">'
                                +  '<div class="more-button float-end">'
                                +  '<a href="'+item.url+'"><span class="icon-options"></span></a>'
                                +  '</div>'
                                +  '</div>'
                                +  '</div>'
                                +  '</div>'
                                lis.push(html);
                            });
                            next(lis.join(''),page < d.total_page);  //拼接成字符串
                        }
                    );
                },500);
            }
        });
 });
</script>

PHP 后端

public function datalist(Request $request)
    {
        $page_size = 6;  //每页显示条数
        $count = \app\common\model\NewsModel::where('status',1)->count();  //总记录数
        $data['total_page'] = ceil($count/$page_size);  //总页数
        $cur_page = intval($request::param('page'))-1;  //默认前端page传过来为1 
        $data['res'] = \app\common\model\NewsModel::where('status',1)
            ->limit(($cur_page*$page_size),$page_size)  //limit默认要从零开始
            ->order('create_time','desc')
            ->select();
        foreach($data['res'] as $key=>$val){
            $val->category_name = \app\common\model\NewsCategoryModel::where('id',$val->category_id)->value('name');    //获取分类名
            $val->url = '/news/show-'.$val->id.'.html';
            $val->listurl = '/news/list-'.$val->category_id.'.html';
        }
        return json($data);  //返回json
    }
正文完
微信扫码打开小程序体验更多功能
post-qrcode
 2
沛霖主页
版权声明:本站原创文章,由 沛霖主页 2021-11-21发表,共计3604字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(一条评论)
匿名 评论达人 LV.1
2022-10-17 17:30:03 回复

这图片比较给力

 iPhone  Safari  中国上海上海市电信