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

最新推荐文章于 2024-07-31 16:04:49 发布

25号底片~

最新推荐文章于 2024-07-31 16:04:49 发布

阅读量1.8k

点赞数 1

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_46001736/article/details/131792272

版权

uni-app 专栏收录该内容

90 篇文章 4 订阅

订阅专栏

效果

代码

核心代码

一、标签显示

<!-- 加载更多 -->
<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.id
				uni.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);
    }