uni-app：实现点击按钮，进行数据累加展示（解决数据过多，导致出错）

效果

代码

核心代码

一、标签显示

        加载更多

• v-if="info.length >= pageNum * pageSize"：这是一个条件渲染的指令，当满足条件时才会渲染该元素。条件是判断当前已加载的元素数量是否达到了当前页码乘以每页的元素数量。
• @tap="loadMore"：这是一个点击事件绑定的指令，当用户点击该元素时，会触发loadMore方法。

 二、变量设置

data() {
	return {
		search: getApp().globalData.icon + 'index/search.png',
		add: getApp().globalData.icon + 'index/index/add.png',
		info: [],
		pageNum: 1,//默认初始页码
		pageSize: 3,//一页显示的条数
		like_trans_num:'',//模糊查询的单号
	}
},

 定义变量pageNum默认初始页码；pageSize一页显示的条数

三、加载更多

loadMore() {
	this.pageNum++;
	this.requestData();
},

点击加载更多按钮，执行内容： 页码数+1，再次执行获取数据的函数

四、获取数据

requestData() {
	uni.request({
		url: getApp().globalData.position + 'Warehouse/select_inhouse',
		data: {
			page: this.pageNum,
			pageSize: this.pageSize,
			like_trans_num:this.like_trans_num
		},
		header: {
			"Content-Type": "application/x-www-form-urlencoded"
		},
		method: 'POST',
		dataType: 'json',
		success: res => {
			if (res.data.info.length > 0) {
				this.info = this.info.concat(res.data.info);
			} else {
				// 没有更多数据
				// 可以在界面上显示相应提示
			}
		},
		fail(res) {
			console.log("查询失败") 
		}
	});
}

•  将页码、每次查询数量、模糊查询数据传入后端作为条件，获取数据库中数据
• if (res.data.info.length > 0) {this.info = this.info.concat(res.data.info);}：判断是满足本页长度是否大于0，如果大于0，进行数据的拼接

五、后端

$page = input('post.page', 1);//获取前端传来的页码数，如果不存在默认为1
$pageSize = input('post.pageSize', 10);//获取前端传来的每页数量，如果不存在默认为10
$start = ($page - 1) * $pageSize; // 查询起始位置
->limit($start,$pageSize)//查询数据库时，作为查询条件

全部代码

前端

后端

   public function select_inhouse() {
        $page = input('post.page', 1);
        $pageSize = input('post.pageSize', 10);
        $like_trans_num = input('post.like_trans_num', '');
        $start = ($page - 1) * $pageSize; // 查询起始位置
        $subQuery = db::table('inv_transactions_all')
            ->field('trans_num, subinventory_from, transaction_type, creation_date')
            ->where('trans_num', 'like', 'ZR%')
            ->where([
                'trans_num'=>['like', '%' . $like_trans_num . '%'],
                ])
            ->order('creation_date DESC')
            ->group('trans_num, subinventory_from, transaction_type, creation_date')
            ->limit($start,$pageSize)
            ->buildSql();
        $data['info'] = db::table([$subQuery => 't'])
            ->select();
        // 格式化时间
        foreach ($data['info'] as &$item) {
            $item['creation_date'] = date('Y-m-d H:i:s', $item['creation_date']);
        }
        // 格式化时间
        echo json_encode($data);
    }