thinkPHP+LayUI 流加载实现功能


Posted in PHP onSeptember 27, 2019

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 流加载实现功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

PHP 相关文章推荐
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
Oct 03 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
Jun 19 PHP
php从csv文件读取数据并输出到网页的方法
Mar 14 PHP
PHP获取文件夹大小函数用法实例
Jul 01 PHP
PHP通过串口实现发送短信
Jul 08 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
Apr 30 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
Apr 09 PHP
PHP rmdir()函数的用法总结
Jul 02 PHP
解决在Laravel 中处理OPTIONS请求的问题
Oct 11 PHP
PHP使用PDO实现mysql防注入功能详解
Dec 20 PHP
thinkphp框架表单数组实现图片批量上传功能示例
Apr 04 PHP
PHP如何防止用户重复提交表单
Dec 09 PHP
PHP的cookie与session原理及用法详解
Sep 27 #PHP
PHP下载文件函数与用法示例
Sep 27 #PHP
PHP的JSON封装、转变及输出操作示例
Sep 27 #PHP
php面向对象重点知识分享
Sep 27 #PHP
php中关于换行的实例写法
Sep 26 #PHP
php伪静态验证码不显示的解决方案
Sep 26 #PHP
php源码的安装方法和实例
Sep 26 #PHP
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP 裁剪图片
2021/03/09 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
JS前端笔试题分析
2016/12/19 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
layui多图上传实现删除功能的例子
2019/09/23 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python完全新手教程
2007/02/08 Python
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
优秀体育委员自荐书
2014/01/31 职场文书
五心教育心得体会
2014/09/04 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
投资入股协议书
2016/03/22 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
golang中的空接口使用详解
2021/03/30 Python
Python基础之数据类型知识汇总
2021/05/18 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Springboot中如何自动转JSON输出
2022/06/16 Java/Android