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

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

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

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

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

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

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

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

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

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

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

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

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

layui信息流加载结束的效果

相关链接：

基于ThinkPHP5，实现layui框架的富文本编辑器插入图片接口

这是一段可以监听所有form表单提交的js代码

ThinkPHP5、内容管理系统、前端框架layui、layPage模块

前端｜Layui框架实现多文件上传并携带额外参数提交到后台

基于PHP框架ThinkPHP5，演示UI框架Layui的表单验证及监听submit提交