NFT/pages/index/node.vue

<template>
	<view class="center">
		<view class="tab flex">
			<view class="left flex" @click="backIndex"><u-icon name="arrow-left" :size="40"></u-icon></view>
			<u-tabs-swiper
				class="tabBox"
				ref="uTabs"
				:height="70"
				:show-bar="false"
				active-color="#44969D"
				inactive-color='#6D7C88'
				:list="tabList"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
			></u-tabs-swiper>
		</view>
		<swiper class="tabSwiper" :current="current" @animationfinish="transition">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="boxItem">
						<view class="item" v-for="ls in tabList[0].list">
							<view class="flex title">
								<view class="tip"></view>
								<view class="name">{{ ls.name }}</view>
							</view>
							<view class="itemConetnt">
								
							</view>
						</view>
					</view>
					<u-loadmore :status="tabList[0].loding"></u-loadmore>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom"><u-loadmore :status="tabList[1].loding"></u-loadmore></scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
export default {
	data() {
		return {
			current: 0, //当前选中的标签
			tabList: [
				{
					name: '节点认购',
					list: [
						{
							name: '节点认购第一期',
							num: 1000, //认购份额
							type: 'LALA', //认购货币类型
							ratio: 10, //认购名额
							limited: 20, //限购名额
							allMoney: 20, //认购总额
							moneyType: 'USDT' //兑换比例金额
						}
					],
					pages: 1,
					limit: 10,
					loding: 'loadmore' //loading加载中 nomore没有数据
				},
				{
					name: '我的认购',
					pages: 1,
					limit: 10,
					list: [],
					loding: 'loadmore' //loading加载中 nomore没有数据
				}
			]
		};
	},
	//页面加载即刻发生
	onload() {},
	methods: {
		backIndex() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 内容框切换事件
		transition(e) {
			console.log(e);
		},
		// tab切换事件
		tabsChange(e) {
			this.current = e;
		},
		// 下拉到底部加载事件
		onreachBottom(e) {
			console.log(e);
		}
	}
};
</script>
<style lang="scss">
.tabBox {
	flex-grow: 1;
}
.center {
	height: 0;
	min-height: 100%;
}
.tab {
	background-color: #ffffff;
	align-items: stretch;
	.left {
		padding-left: 10rpx;
		padding-right: 20rpx;
	}
}
.tabSwiper {
	height: calc(100% - 70rpx);
	.swiper-item {
		padding: 30rpx;
		.boxItem {
			.item {
				background-color: #ffffff;
				line-height: 1;
				padding:  30rpx;
				.title {
					justify-content: flex-start;
					padding-bottom: 30rpx;
					align-items: stretch;
					border-bottom: 1px solid $border-color-light;
				}
				.tip {
					width: 7rpx;
					border-radius: 99rpx;
					background-color: $base-color;
				}
				.name{
					margin-left: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: $font-color-dark;
				}
			}
		}
	}
}
</style>