xs/xs-app/pagesA/tradingRecord/tr-recharge.vue

<template>
	<view class="tr-recharge_content">
		<!--  :enable-back-to-top="current_index===tab_index" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging v-if="first_loaded || is_currentPage" 
		    ref="paging" 
			v-model="data_list"
			:default-page-size="15"
			@query="queryList" 
			:fixed="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="list" v-for="(item,index) in data_list" :key="index" @click="itemClick(item)">
				<view class="item">
					<view class="item__info">
						<view class="item__info__title">
							<view class="item__info__title__text">
							    {{item.goods_name}}
							</view>
							<view class="item__info__title__status" :style="{backgroundColor:tools.getOrderStatusInfo(item.status).bg_color}">
								{{tools.getOrderStatusInfo(item.status).title}}
							</view>
						</view>
						<view class="item__info__date">
							{{item.create_at}}
						</view>
					</view>
					<view class="item__rmb">
						-{{(item.amount/100).toFixed(2)}}
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
    import { nextTick, ref, watch } from 'vue';
    import { trading_record_item_data } from '../../data/data';
    import { tools } from '../../framework/tools';
	
	let data_list = ref([])         //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
	let first_loaded = ref(false)   //当前组件是否已经加载过了
	let is_currentPage = ref(false) //是否滚动到当前页
	const paging = ref(null)       //$ref:paging
		
	const props = defineProps({
		tab_index: Number,    //当前组件的index，也就是当前组件是swiper中的第几个
		current_index:Number, // 当前swiper切换到第几个index
	})
	watch(()=>props.current_index, (new_v,old_v)=>{
		if(new_v === props.tab_index){
			// 懒加载，当滑动到当前的item时，才去加载
			if(!first_loaded.value){
				first_loaded.value = true
				// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
				nextTick(()=>{
					setTimeout(() => {
						is_currentPage.value = true
					}, 100);
				})
			}
		}
	},{immediate:true})
	
	function queryList(pageNum:number, pageSize:number) {
		// console.log('pageNum=',pageNum,'pageSize=',pageSize)
		tools.requestOrderList(1,pageNum,pageSize,(data)=>{
			// console.log('充值data=',data)
			if(data) {
				if (pageNum == 1) {
					data_list.value = []
				}				
				paging.value.complete(data.list)
				data_list.value = data_list.value.concat(data.list)
			} else {
				paging.value.complete(false)				
			}			
		})
	}
	
	function itemClick(item_data:trading_record_item_data) {
	}
	
</script>

<style lang="scss">
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.tr-recharge_content {
		height: 100%;
		background-color: #ffffff;
		.list{		
		    display: flex;
			justify-content: center;
						
			.item{
				margin-top: 4%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 88%;
				padding: 3% 3%;
				border-radius: 20rpx;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
				background-color: #ffffff;
				
				&__info {
					display: flex;
					flex-direction: column;
					width: 78%;
					margin-right: 2%;
					&__title {
						display: flex;
						flex-direction: row;
						
						&__text {
							font-size: 17px;
							color: #000;
							max-width: 80%;
							white-space: nowrap; /* 防止文本换行 */
							overflow: hidden; /* 隐藏溢出的文本 */
							text-overflow: ellipsis; /* 超出部分显示为省略号 */
						}
						&__status{
							display: flex;
							justify-content: center;
							align-items: center;
							margin-left: 15rpx;
							padding: 0 10rpx;
							font-size: 12.5px;
							color: #ffffff;
							background-color: #93DB6B; // #FDCC22
							border-top-left-radius: 20rpx;
							border-top-right-radius: 20rpx;
							border-bottom-right-radius: 20rpx;
						}
					}
					&__date{
						margin-top: 16rpx;
						font-size: 14px;
						color: #6D6D6D;
					}
					
				}
				&__rmb{
					margin-top: -2%;
					display: flex;
					justify-content: right;
					width: 20%;
					font-size: 17px;
					color: #FF133A;
				}
			}
		}
		
	}
</style>