456

xs-app/pages/tradingRecord/tr-consume.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="content">
+		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
+		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
+		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
+			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
+			<view class="item" v-for="(item,index) in dataList" :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 dataList = ref([])         //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+	let firstLoaded = ref(false)   //当前组件是否已经加载过了
+	let isCurrentPage = ref(false) //是否滚动到当前页
+	const paging = ref(null)       //$ref:paging
+		
+	const props = defineProps({
+		tabIndex: Number,    //当前组件的index，也就是当前组件是swiper中的第几个
+		currentIndex:Number, // 当前swiper切换到第几个index
+	})
+	watch(()=>props.currentIndex, (new_v,old_v)=>{
+		if(new_v === props.tabIndex){
+			// 懒加载，当滑动到当前的item时，才去加载
+			if(!firstLoaded.value){
+				// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
+				nextTick(()=>{
+					setTimeout(() => {
+						isCurrentPage.value = true
+					}, 100);
+				})
+			}
+		}
+	},{immediate:true})
+	
+	function queryList(pageNo:number, pageSize:number) {
+		// console.log('pageNo=',pageNo,'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)
+			firstLoaded.value = true
+		},500)
+	}
+	
+</script>
+
+<style lang="scss">
+	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
+	.content {
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+	<view class="content">
+		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
+		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
+		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
+			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
+			<view class="item" v-for="(item,index) in dataList" :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 dataList = ref([])         //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+	let firstLoaded = ref(false)   //当前组件是否已经加载过了
+	let isCurrentPage = ref(false) //是否滚动到当前页
+	const paging = ref(null)       //$ref:paging
+	
+	const props = defineProps({
+		tabIndex: Number,    //当前组件的index，也就是当前组件是swiper中的第几个
+		currentIndex:Number, // 当前swiper切换到第几个index
+	})
+	watch(()=>props.currentIndex, (new_v,old_v)=>{
+		if(new_v === props.tabIndex){
+			// 懒加载，当滑动到当前的item时，才去加载
+			if(!firstLoaded.value){
+				// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
+				nextTick(()=>{
+					setTimeout(() => {
+						isCurrentPage.value = true
+					}, 100);
+				})
+			}
+		}
+	},{immediate:true})
+	
+	
+	
+	function queryList(pageNo:number, pageSize:number) {
+		// console.log('pageNo=',pageNo,'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)
+			firstLoaded.value = true
+		},500)
+	}
+	
+</script>
+
+<style lang="scss">
+	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
+	.content {
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+	<view class="content">
+		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
+		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
+		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
+			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
+			<view class="item" v-for="(item,index) in dataList" :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 dataList = ref([])         //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+	let firstLoaded = ref(false)   //当前组件是否已经加载过了
+	let isCurrentPage = ref(false) //是否滚动到当前页
+	const paging = ref(null)       //$ref:paging
+		
+	const props = defineProps({
+		tabIndex: Number,    //当前组件的index，也就是当前组件是swiper中的第几个
+		currentIndex:Number, // 当前swiper切换到第几个index
+	})
+	watch(()=>props.currentIndex, (new_v,old_v)=>{
+		if(new_v === props.tabIndex){
+			// 懒加载，当滑动到当前的item时，才去加载
+			if(!firstLoaded.value){
+				// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
+				nextTick(()=>{
+					setTimeout(() => {
+						isCurrentPage.value = true
+					}, 100);
+				})
+			}
+		}
+	},{immediate:true})
+	
+	function queryList(pageNo:number, pageSize:number) {
+		// console.log('pageNo=',pageNo,'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)
+			firstLoaded.value = true
+		},500)
+	}
+	
+</script>
+
+<style lang="scss">
+	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
+	.content {
+		height: 100%;
+	}
+</style>

xs-app/pages/tradingRecord/tradingRecord.vue

@@ -1,22 +1,50 @@
 <template>
-	<view>
-		
-	</view>
+	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
+	<z-paging-swiper>
+		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
+		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
+		<template #top>
+			<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
+		</template>
+		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
+		<swiper class="swiper" duration="1" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
+			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index" @touchmove.stop>
+				<recharge v-if="index==0" :tabIndex="index" :currentIndex="current"></recharge>
+				<consume v-if="index==1" :tabIndex="index" :currentIndex="current"></consume>
+				<rewards v-if="index==2" :tabIndex="index" :currentIndex="current"></rewards>
+			</swiper-item>
+		</swiper>
+	</z-paging-swiper>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
+<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 tabList = 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>
+</script>
 
+<style lang="scss">
+    .swiper {
+		height: 100%;
+	}
 </style>