thinkPHP+LayUI 流加载实现功能分享!

html

  <div class="layui-container" id="container"> </div>

js,要引入layui.js

  layui.use('flow', function() {    var $ = layui.jquery;    var flow = layui.flow;      flow.load({      elem: '#container' //流加载容器        //滚动条所在元素,一般不用填,此处只是演示需要。      ,done: function(page, next){ //执行下一页的回调       console.log(page)       //模拟数据插入       setTimeout(function(){        var lis = [];        var url = "/index/index/ajaxNews/?page="+page        $.get(url,function (res) {                      layui.each(res.msg.data, function(index, item) {              lis.push('<div class="layui-row list">                <a href="newsDesc/id/'+item.id+'" rel="external nofollow" >                  <div class="layui-col-xs4 layui-col-sm4 ">                    <img src="'+item.cover_img+'">                  </div>                  <div class="layui-col-xs7 layui-col-sm7 right">                    <div class="title">'+item.title+'</div>                    <div class="intro">'+item.intro+'</div>                  </div>                </a>              </div>              <hr/> ');            });//组装html            //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多            next(lis.join(''), page <= res.msg.pages);                  })       }, 300);      }     });  });  </script>    

php Controller控制器

  public function ajaxNews()    {      $page = input('page');  //页码      $pagesize = 6;      $list['data'] = model('Index')->getNewsList($page,$pagesize);      $count= model('Index')->getNewsCount();      $list['pages'] = ceil($count/$pagesize);      if ($list) {        return return_succ($list);      }else{      return return_error('暂无数据');      }    }    

php model模型

  // 获取动态列表    public function getNewsList($page,$pagesize)    {      $list = Db::name('news')        ->field('id,title,intro,cover_img')        ->order('create_time desc')        ->where(['status'=>0])        ->page($page,$pagesize)        ->select();      return $list;    }    //获取动态总条数    public function getNewsCount()    {      $count = Db::name('news')->where(['status'=>0])->count();      return $count;    }    

总结

以上所述是小编给大家介绍的thinkPHP+LayUI 流加载实现功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对<计算机技术网(www.ctvol.com)!!>网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

—-想了解thinkPHP+LayUI 流加载实现功能分享!且更多的php教程关注<计算机技术网(www.ctvol.com)!!>

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/phpttorial/470298.html

(0)
上一篇 2020年10月26日
下一篇 2020年10月26日

精彩推荐