PHP+LayUI 流加载详细用法跨坑记录。

这里是html:

<div>
    <ul id="demo">
        //组装的html将会出现在这里。
    </ul>
</div>

这里是layui的javascript: 

//记得先引用layui.js
//<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
//<link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all" />

layui.use('flow', function() {
	var $ = layui.jquery;
	var flow = layui.flow;
	flow.load({
		elem: '#demo',//要插入数据的元素的id
		done: function(page, next) {//page从1开始,
			var lis = [];
			$.get('/home/myvip/data?page=' + page, function(res) {//接口地址
				layui.each(res.data, function(index, item) {
					lis.push('<li>\
						<a href="javascript:;">\
						<div>\
						<img src="'+item.avatar+'" />\
						<h3><p>'+item.username+'</p><span>'+item.level_name+'</span></h3>\
						<p>关注时间:'+item.reg_time+'</p>\
						</div>\
						<h4>+'+item.sum+'<br />'+item.member+'个成员</h4>\
						</a>\
						</li>');
					});//组装html
					next(lis.join(''), page < res.pages);
                    //res.pages是统计,把所有你要显示的数据统计传过来。 
				});
			}
		});

 这里是PHP:

public function data($page,$pagesize=10)
	{
		$list = db('users')
		->alias('u')
		->join('user_level ul','u.level=ul.level_id','left')
		->field('u.username,u.reg_time,ul.level_name,u.id,u.parentid,u.avatar')
		->where('parentid',$this->userid)
		->order('id desc')
		->page($page,$pagesize)//这个是关键的分页助手函数。
                               //可以查看文档了解。第一个参数是页码,第二个参数是 每页数量
		->select();

		foreach ($list as $k => $v) {
			$list[$k]['member']=db('users')->where('parentid',$v['id'])->count();
			$list[$k]['sum']=db('commission')->where('sonid',$v['id'])->where('userid',$this->userid)->sum('yongjin');

			$list[$k]['reg_time']= date('Y-m-d',$v['reg_time']);
			if ($v['avatar'] == '') {
				$list[$k]['avatar'] = '/static/home/images/touxiang.png';
			}
		}
		$res['pages'] = count($list);//统计总数。
		$res['data']  = $list;//返回列表
		return $res;
	}

以上。

猜你喜欢

转载自blog.csdn.net/qq_34876813/article/details/82284223