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

效果

代码

核心代码

一、标签显示

<!-- 加载更多 -->
<view class="load_more" v-if="info.length >= pageNum * pageSize" @tap="loadMore">加载更多
</view>

• 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)//查询数据库时，作为查询条件

全部代码

前端

<template><view><!--新增--><image class='img' :src="add" @tap='add_inhouse'></image><!-- 搜索框 --><view class="top"><view class="search"><view class="search_in"><image :src="search"></image><input type="text" placeholder="请输入工单信息" placeholder-style="color:#CCCCCC"@confirm="search_inhouse" /></view></view></view><!-- 主干内容 --><view class="item_info" v-for="(item, index) in info" :key="index"><view class="all_content" :data-id="item.trans_num" @tap="detail_inhouse"><view class="all_position"><!-- 第一行 --><view class="line1"><!-- 单号 --><view class="line1_left">{{item.trans_num}}</view><view class="line1_right">{{item.created_by}}</view></view><view class="line2"><!-- 供应商名称 --><view class="line2_item">交易类型：{{item.transaction_type}}</view><view class="line2_item">仓库名称：{{item.subinventory_from}}</view><view class="line2_item">	创建时间：{{item.creation_date}}</view></view></view></view></view><!-- 加载更多 --><view class="load_more" v-if="info.length >= pageNum * pageSize" @tap="loadMore">加载更多</view></view>
</template><script>export default {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:'',//模糊查询的单号}},methods: {//查询杂项入库的详情页detail_inhouse(e){// console.log(e.currentTarget.dataset.id)var trans_num = e.currentTarget.dataset.iduni.navigateTo({url: '../detail_inhouse/detail_inhouse?trans_num='+trans_num,})},//新增采购入库add_inhouse(){uni.navigateTo({url: '../add_inhouse/add_inhouse',})},loadMore() {this.pageNum++;this.requestData();},//模糊查询search_inhouse(e){this.info=[];this.pageNum= 1;this.pageSize=3;// console.log(e.target.value);this.like_trans_num = e.target.value;this.requestData();},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 => {// console.log(res.data.info)// console.log(res.data.all_count)if (res.data.info.length > 0) {this.info = this.info.concat(res.data.info);} else {// 没有更多数据// 可以在界面上显示相应提示}},fail(res) {console.log("查询失败") }});}},onLoad() {this.requestData();}}
</script><style>/* 主体内容 */.all_content {margin-top: 25rpx;/* border: 1px solid black; */width: 100%;background-color: #ffffff;display: flex;justify-content: center;}.all_position {width: 92%;/* border: 1px solid red; */}.line1 {display: flex;width: 100%;padding: 20rpx 0;border-bottom: 4rpx solid #e5e5e5;}.line1_left {width: 50%;}.line1_right {width: 50%;text-align: right;}.line2 {/* border: 1px solid red; */padding: 20rpx 0 20rpx 0;}.line2_item {/* border: 1px solid red; */padding: 10rpx 0;}/* 背景色 */page {background-color: #F0F4F7; }/* 悬浮按钮 */.img {float: right;position: fixed;bottom: 6%;right: 2%;width: 100rpx;height: 100rpx;}/* 搜索框 */.search {display: flex;align-items: center;justify-content: center;background-color: #ffffff;/* border:1px solid black; */width: 100%;height: 100rpx;}.search .search_in {display: flex;align-items: center;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;height: 70rpx;width: 90%;background-color: #F0F4F7;border-radius: 10rpx;/* border:1px solid black; */}.search_in image {height: 40rpx;width: 45rpx;margin-right: 20rpx;}.search input {width: 100%;}/* 加载更多 */.load_more {text-align: center;padding: 20rpx 0;color: #999999;font-size: 28rpx;}
</style>

后端

   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);}