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获得文件扩展名三法
Nov 25 PHP
PHP 批量更新网页内容实现代码
Jan 05 PHP
ThinkPHP关联模型操作实例分析
Sep 23 PHP
php读取csv实现csv文件下载功能
Dec 18 PHP
yii框架配置默认controller和action示例
Apr 30 PHP
自定义session存储机制避免会话保持问题
Oct 08 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
Nov 08 PHP
Linux操作系统安装LAMP环境
Jun 26 PHP
php实现模拟post请求用法实例
Jul 11 PHP
如何使用微信公众平台开发模式实现多客服
Jan 06 PHP
php ajax confirm 删除实例详解
Mar 06 PHP
laravel数据库查询结果自动转数组修改实例
Feb 27 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/21 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php中file_exists函数使用详解
2015/05/08 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python实现微信远程控制电脑
2018/02/22 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
django celery redis使用具体实践
2019/04/08 Python
Python的形参和实参使用方式
2019/12/24 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
中英文自我评价常用句型
2013/12/19 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
详解Redis实现限流的三种方式
2021/04/27 Redis