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编码规范之注释和文件结构说明
Jul 09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
May 25 PHP
PHP静态调用非静态方法的应用分析
May 02 PHP
php实现的SESSION类
Dec 02 PHP
PHP获取当前日期和时间及格式化方法参数
May 11 PHP
php单一接口的实现方法
Jun 20 PHP
ThinkPHP中数据操作案例分析
Sep 27 PHP
thinkPHP下ueditor的使用方法详解
Dec 26 PHP
PHP编程之设置apache虚拟目录
Jul 08 PHP
PHP count_chars()函数讲解
Feb 14 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
Jan 02 PHP
PHP设计模式概论【概念、分类、原则等】
May 01 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
php date()日期时间函数详解
2010/05/16 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python中cPickle用法例子分享
2014/01/03 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
安全责任书范文
2014/03/12 职场文书
2015年党性分析材料
2014/12/19 职场文书
小学教师年度个人总结
2015/02/05 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
MySQL池化框架学习接池自定义
2022/07/23 MySQL