html

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('

\

---

');

});//组装html

//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多

next(lis.join(''), page <= res.msg.pages);

})

}, 300);

}

});

});

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 流加载实现功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！