PHP加layui信息流加载,使用ThinkPHP5和前端框架layui的信息流加载实现文章的自动加载...

本文主要是在基于ThinkPHP5和前端框架layui开发的内容管理系统中,利用thinkPHP5的api特性和layui的信息流加载实现文章的自动加载,即列表不分页,自动加载下一页信息。关于thinkPHP5和layui的更多内容,请移步阅读官方文档,也可在本站搜索一下,应该还要一些相关内容,更多内容正在补充中。

本例中场景为:网站首页默认加载10篇文章,往下拖动滚动条,自动再加载10篇文章,直至展示完所有文章为止。

首先,实现首页控制器IndexController,读取10篇文章,并展示出来,控制器关键代码如下:

上述代码中使用到了数据库的查询缓存操作cache,cache可以用于select、find、value和column等方法,以及其衍生方法,使用cache方法后,在缓存有效期之内访问页面将不会进行数据库查询操作,而是直接获取缓存中的数据。关于thinkPHP5缓存问题的更多内容请查看thinkPHP5文档。

然后,将默认查出的数据在页面中进行展示,相关的关键代码如下:

fd007d0df5332977887c51bf1b2942e0.png

thinkPHP5的内置标签——foreach循环标签

foreach是thinkPHP5模板的内置标签,用法和PHP语法非常接近,用于循环输出数组或者对象的属性,不多介绍,用过ThinkPHP3的朋友们也应该知道,是一样的。

第三,在首页的HTML模板中,使用layui的流加载模块对上述代码中articles容器进行渲染,关键代码如下:

da792d016966c675b916cc523c486fdc.png

layui的流加载模块对articles容器进行渲染的关键代码

layui的流加载模块包含了信息流加载、图片懒加载两大核心,对服务端和前端体验,都有比较不错的提升,关于layui流加载的更多内容请查看layui官方文档,也给贤心大神送些流量吧。

第四,实现信息流加载的ajax请求,从服务器获取下一页数据,我在index控制器中通过get_article_flow()方法实现,关键代码如下:

简单明了,直接return查到的数据。好了,看下一最终效果:

layui信息流加载结束的效果

相关链接:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值