您的位置：首页 > 编程学习 > > 正文

thinkphp前后端配合（thinkPHP+LayUI 流加载实现功能）

更多 时间：2021-10-21 07:22:51 类别：编程学习 浏览量：858

thinkphp前后端配合

thinkPHP+LayUI 流加载实现功能

html

  • ?
  • 1
    		•
  • <li class="layui-container" id="container"> </li>
    		•

    • js，要引入layui.js

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
    		•
  • 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('<li class="layui-row list">\
  •               <a href="newsDesc/id/'+item.id+'" rel="external nofollow" >\
  •                 <li class="layui-col-xs4 layui-col-sm4 ">\
  •                   <img src="'+item.cover_img+'">\
  •                 </li>\
  •                 <li class="layui-col-xs7 layui-col-sm7 right">\
  •                   <li class="title">'+item.title+'</li>\
  •                   <li class="intro">'+item.intro+'</li>\
  •                 </li>\
  •               </a>\
  •             </li>\
  •             <hr/> ');
  •           });//组装html
  •           //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
  •           next(lis.join(''), page <= res.msg.pages);
  •         
  •       })
  •      }, 300);
  •     }
  •    });
  • });
  • </script>
    		•

    • php Controller控制器

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
    		•
  • 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模型

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
    		•
  • // 获取动态列表
  •   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 流加载实现功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持！
    如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

    原文链接：https://www.cnblogs.com/zxf100/archive/2019/09/27/11596813.html

    标签：ThinkPHP Layui 流加载
  • 上一篇：win7iis搭建web服务器（如何搭建云服务器之IIS的配置）
  • 下一篇：vue代码统计（Vue实现计数器案例）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利