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

<template>
	<view class="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" @query="queryList" :fixed="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in data_list" :key="index" @click="itemClick(item)">
				<view class="item-title">{{item.title}}</view>
				<view class="item-detail">{{item.detail}}</view>
				<view class="item-line"></view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
    import { nextTick, ref, watch } from 'vue';
		
	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)
		let tem_list = []
		for (let i = 0; i < 10; i++) {
			let a = {'title':`奖励-${i}`,'detail':`detail${i}`}
			tem_list.push(a)
		}
		setTimeout(()=>{
			paging.value.complete(tem_list)
		},500)
	}
	
</script>

<style lang="scss">
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
		background-color: #ffffff;
	}
</style>