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