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也可以?成Shell Script
Oct 09 PHP
IIS6的PHP最佳配置方法
Mar 19 PHP
初次接触php抽象工厂模式(Elgg)
Mar 21 PHP
PHP 通过Socket收发十六进制数据的实现代码
Aug 16 PHP
php中 $$str 中 &quot;$$&quot; 的详解
Jul 06 PHP
基于ThinkPHP实现批量删除
Dec 18 PHP
php实现购物车功能(以大苹果购物网为例)
Mar 09 PHP
yii2局部关闭(开启)csrf的验证的实例代码
Jul 10 PHP
PHP创建自己的Composer包方法
Apr 09 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
Jun 06 PHP
laravel框架中表单请求类型和CSRF防护实例分析
Nov 23 PHP
PHP延迟静态绑定使用方法实例解析
Sep 05 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/04/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
在Python中COM口的调用方法
2019/07/03 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python如何实现线程间通信
2020/07/30 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2015年党性分析材料
2014/12/19 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
采购员工作总结范文
2015/08/12 职场文书
关于教师节的广播稿
2015/08/19 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
解析python中的jsonpath 提取器
2022/01/18 Python