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

<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper>
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<z-tabs ref="tabs" :list="tab_list" :current="current" @change="tabsChange" 
			inactiveColor='#000' activeColor="#FD4A76"
			:active-style="{'font-size': '18px', 'font-weight': '400'}"
			:inactive-style="{'font-size': '18px', 'font-weight': '400'}"
			barWidth="90"
			/>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" duration="100" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tab_list" :key="index">
				<recharge v-if="index==0" :tab_index="index" :current_index="current"></recharge>
				<consume v-if="index==1" :tab_index="index" :current_index="current"></consume>
				<rewards v-if="index==2" :tab_index="index" :current_index="current"></rewards>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
	import recharge from '../tradingRecord/tr-recharge.vue'
    import consume from '../tradingRecord/tr-consume.vue'
	import rewards from '../tradingRecord/tr-rewards.vue'
	
	let tab_list = ref(['充值记录','消费记录']) //ref(['充值记录','消费记录','奖励记录'])
	let current = ref(0) // tabs组件的current值，表示当前活动的tab选项
	const tabs = ref(null)
	
	// tabs通知swiper切换
	function tabsChange(index:number) {
		current.value = index
	}
	// swiper滑动中
	function swiperTransition(e) {
		tabs.value.setDx(e.detail.dx)
	}
	// swiper滑动结束
	function swiperAnimationfinish(e) {
		current.value = e.detail.current
		tabs.value.unlockDx()
	}

</script>

<style lang="scss">
    .swiper {
		height: 100%;
	}
</style>