专栏首页恩蓝脚本thinkPHP+LayUI 流加载实现功能

thinkPHP+LayUI 流加载实现功能

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP设计模式之简单工厂和工厂模式实例分析

    本文实例讲述了PHP设计模式之简单工厂和工厂模式。分享给大家供大家参考,具体如下:

    砸漏
  • Android中外接键盘的检测的实现

    今天来了一个问题:软键盘无法弹出。分析后是因为系统判断当前有外接硬键盘,就会隐藏软键盘。但实际情况并不是这么简单,该问题只有在特定条件下偶现,具体分析过程就不说...

    砸漏
  • Django自定义列表 models字段显示方式

    我们可以在这基础上改进,添加其它字段,从而改变django后台admin 数据库列表字段的显示。 这个页面应该提供便利,比如说:在这个列表中可以看到编号,标题,...

    砸漏
  • WebMagic 基础知识

    WebMagic框架包含四个组件,PageProcessor、Scheduler、Downloader和Pipeline。

    Remember_Ray
  • Django之分页组件和自定义分页

    Django提供了一个新的类来帮助你管理分页数据,这个类存放在django/core/paginator.py.它可以接收列表、元组或其它可迭代的对象。

    菲宇
  • 深度 | 解析InnoDB引擎

    一、综述 innodb的物理文件包括系统表空间文件ibdata,用户表空间文件ibd,日志文件ib_logfile,临时表空间文件ibtmp,undo独立表空...

    腾讯云数据库 TencentDB
  • 浅析InnoDB文件结构

    innodb的物理文件包括系统表空间文件ibdata,用户表空间文件ibd,日志文件ib_logfile,临时表空间文件ibtmp,undo独立表空间等。

    腾讯数据库技术
  • page结构体,何处安放你的灵魂?

    随着硬件能力的提升,系统内存容量变得越来越大。尤其是在服务器上,过T级别的内存容量也已经不罕见了。

    Linux阅码场
  • R语言k-Shape时间序列聚类方法对股票价格时间序列聚类

    在本研究中,我们将研究具有交易关系的公司的价格变化率的时间序列的相似性,而不是网络结构的分析。 由于特定客户的销售额与供应商公司的销售额之比较大,当客户公司...

    拓端
  • 事务的本质和死锁的原理

    其中abc方法开始执行时,执行到a方法,锁定a表,当a方法结束b方法开始时,a表解锁,b表锁定,当b方法结束c方法开始时,b表解锁c表锁定。

    MySQL技术

扫码关注云+社区

领取腾讯云代金券