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 相关文章推荐
粗略计算在线时间,bug:ip相同
Dec 09 PHP
php 执行系统命令的方法
Jul 07 PHP
php设计模式 Chain Of Responsibility (职责链模式)
Jun 26 PHP
php实现快速排序的三种方法分享
Mar 12 PHP
php自定义urlencode,urldecode函数实例
Mar 24 PHP
PHP实现在线阅读PDF文件的方法
Jun 17 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
Sep 09 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
Nov 02 PHP
php连接微软MSSQL(sql server)完全攻略
Nov 27 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
Jul 03 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
Oct 15 PHP
php实现微信分享朋友链接功能
Feb 18 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实现在线阅读PDF文件的方法
2015/06/17 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jQuery each()小议
2010/03/18 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python中生成Epoch的方法
2017/04/26 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python定义函数实现累计求和操作
2020/05/03 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
幼儿教师国培感言
2014/02/19 职场文书
总经理工作职责范文
2014/03/14 职场文书
九寨沟导游词
2015/02/02 职场文书
酒店前台岗位职责
2015/04/16 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL