小程序分页处理-下滑加载数据

最新推荐文章于 2024-05-17 06:17:38 发布

海绵宝宝不喜欢侬

最新推荐文章于 2024-05-17 06:17:38 发布

阅读量655

点赞数 1

文章标签：小程序 javascript 开发语言

本文链接：https://blog.csdn.net/m0_58953167/article/details/131719254

版权

开发语言：uniapp 小程序
前提：后端做了分页处理，并且将所有数据返回，前端拿到数据后，向后端传两个参数，代表获取第几页，每页显示几条数据。
1、获取后端数据

data(){
	return{
		// 定义初始数组
		transList:[], 
		// 定义初始加载第一页数据
		page: 1
	}
}
// 进入页面时调用加载后端数据的方法
onLoad() {
	this.TransQueryData()
},
methods: {
	// 调接口的方法
	TransQueryData() {
		let obj = {
			"M": this.page,  // 页数
			"N": "20",		// 每页显示条数
		};
		getTransQueryData(obj).then(res => {
			uni.hideLoading()
			if (res.data.HEAD.CODE == '000') {
				// 后端获取的数据拼接到初始数组中
				this.transList = this.transList.concat(res.data.BODY.orderList)
			} 
		})
	},
}

2、页面渲染数据

<view class="con_list" v-for="(item,index) in transList" :key="index" @click="goToTransDetails(index)">
	<view class="list_top">
		<view class="top_txt">{{item.txnTypeEnum}}</view>
		<view class="top_amount">{{(item.txnAmount / 100).toFixed(2)}}</view>
	</view>
	<view class="list_bottom">
		<view class="bot_time">{{(item.createTime).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5')}}</view>
		<view class="bot_result">{{txnTxt}}</view>
	</view>
</view>

3、分页处理

// 页面上拉触底事件的处理函数
onReachBottom() {
	if(this.transList.length > 0){
		uni.showLoading({
			mask:true
		})
		// 每次上拉数据，触底时，都会使页数+1，依次获取第二页、第三页的数据
		this.page += 1
		this.TransQueryData();
	}
},