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

<template>
	<view class="tr-consume_content">
		<!--  :enable-back-to-top="current_index===tab_index" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<view class="total-expend_coins">
			<view class="total-expend_coins__title">累计使用书币</view>
			<view class="total-expend_coins__coin">{{total_number}}</view>
		</view>
		<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>
						<view class="item__info__date">{{item.create_at}}</view>
					</view>
					<view class="item__book">
						<view class="item__book__name">{{item.book_name}}</view>
						<view class="item__book__chapter">{{item.chapter_name}}</view>
					</view>
					<view class="item__coin">
						-{{item.coin}}书币
					</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) //是否滚动到当前页
	let total_number = ref(0)
	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(2,pageNum,pageSize,(data)=>{
			// console.log('消费data=',data)
			if(data) {
				if (pageNum == 1) {
					data_list.value = []
					total_number.value = data.total_number
				}				
				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-consume_content {
		height: 100%;
		background-color: #ffffff;
		
		.total-expend_coins{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 15px;
			color: #737373;
			padding: 0 30rpx;
			padding-top: 20rpx;
			&__title{}
			&__coin{}
		}
		
		.list{
			display: flex;
			justify-content: center;
			
			.item{
				margin-top: 4%;
				display: flex;
				flex-direction: row;
				width: 88%;
				padding: 3% 3%;
				border-radius: 20rpx;
				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
				background-color: #ffffff;
				&__info{
					width: 40%;
					&__title {
						font-size: 17px;
						color: #000;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 超出部分显示为省略号 */
					}
					&__date{
						margin-top: 16rpx;
						font-size: 13px;
						color: #6D6D6D;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 超出部分显示为省略号 */
					}
				}
				&__book{
					width: 40%;
					&__name {
						font-size: 17px;
						color: #000;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 超出部分显示为省略号 */
					}
					&__chapter{
						margin-top: 16rpx;
						font-size: 13px;
						color: #6D6D6D;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的文本 */
						text-overflow: ellipsis; /* 超出部分显示为省略号 */
					}
				}
				&__coin{
					margin-top: 2%;
					display: flex;
					justify-content: right;
					width: 20%;
					font-size: 15px;
					color: #FF133A;
				}
			}
		}
	}
</style>