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+'">\
<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);
return json($list);
}

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 懒加载实现的更多相关文章

  1. layui图片懒加载-loading占位图

    前言 使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use(’flow’ ...

  2. LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

    LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...

  3. 在ThinkPHP框架(5.0.24)下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载

    这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...

  4. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  5. 懒加载session 无法打开 no session or session was closed 解决办法(完美解决)

           首先说明一下,hibernate的延迟加载特性(lazy).所谓的延迟加载就是当真正需要查询数据时才执行数据加载操作.因为hibernate当中支持实体对象,外键会与实体对象关联起来.如 ...

  6. 学习EF之贪懒加载和延迟加载(2)

    通过昨天对EF贪婪加载和延迟加载的学习,不难发现,延迟加载还是很好用的,但是问题也就来了,有的时候我们只需要加载一个实体,不需要和他相关的外部实体,这时候我们来看看EF延迟加载时怎么作用的吧 打开pr ...

  7. 懒加载(getter\setter理解)

    为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器 控制器一旦加载, ...

  8. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. 【转】实现ViewPager懒加载的三种方法

    方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...

随机推荐

  1. Java——判断回文

    package basic; import java.util.Scanner; public class Palindrome{ public static boolean isPalindrome ...

  2. 20189220余超 团队博客——阅读软件app

    项目名称 小说阅读器 项目功能 注册登录 用户信息.用户密码.用户图像修改 书籍分类 书架 书籍搜索(作者名或书籍名) 书籍阅读(仅txt格式,暂不支持PDF等其他格式) 阅读字体.背景颜色.翻页效果 ...

  3. 【Gamma】Scrum Meeting 7

    前言 会议定点:大运村公寓 会议时间:2019/6/5 会议目的:明确下阶段目标 一.任务进度 组员 上周任务进度 下阶段任务 大娃 修复后端bug 辅助做好引导录屏 二娃 撰写会议博客 撰写会议博客 ...

  4. idea 2019.2 版本把菜单栏隐藏了恢复办法

    一不小心把idea的菜单栏给隐藏了(如图) ,搞了半天也恢复不了,网上也没有找到什么办法,可是搞得我焦头烂额呀,怎么找也找不到,也不见大神有过提示,最后没办法,想着去看看它的配置文件吧,于是便找到了默 ...

  5. windows 批处理命令

    关机: shutdown -s -t 1 ::-t后面添加时间,表示多少秒之后关机, 删除文件夹以及子文件: rd file2 /s/q  ::/s 删除子文件 /q不需要确认 新建文件夹: md f ...

  6. 『正睿OI 2019SC Day2』

    分治 普通分治 普通分治是指针对序列或平面问题的分治算法. 思想 普通分治的思想是指将一个序列问题或平面问题通过某种划分方式划分为若干个子问题,直到子问题规模足够小,可以直接回答,再通过合并得到原问题 ...

  7. 『磁力块 bfs 分块』

    磁力块 Description 在一片广袤无垠的原野上,散落着N 块磁石.每个磁石的性质可以用一个五元组 (x,y,m,p,r)描述,其中x,y 表示其坐标,m 是磁石的质量,p 是磁力,r 是吸引半 ...

  8. Java学习:线程间通信

    线程间通信 概念:多个线程在处理同一个资源,但是处理的动作(线程的任务)却不相同重点:有效的利用资源 分析:需要那些类 1 资源类:包子类 设置包子的属性 包子的状态:有true 没有false 2 ...

  9. redis字符串类型键的二进制操作

    命令名称:setbit 语法:setbit key offset value 功能: 1)对key所存储的字符串值,设置或清除指定偏移量上的位(bit),位的设置或清除取决于value参数,可以是0也 ...

  10. qbittorrent搜索插件合集

    qbittorrent搜索 qbittorrent搜索一个很有特色的功能: 这里收集整理了一些公开网站的插件(Plugins for Public sites),并连 源py文件一起分享. qbitt ...