BiKing/pages/index/modules/market.vue

<template>
	<view class="market-box">
		<view class="market-tab">
			<view v-for="(item , index) in marketTab"
				:class="['market-tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
				@click.stop="marketTabIndex = index">
				{{ item }}
			</view>
		</view>
		<swiper :duration="150" class="market-content" :current="marketTabIndex">
			<swiper-item>
				<scroll-view class="market-scroll" scroll-y>
					<add-optional ref="addOptionalRef" />
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="market-scroll" scroll-y>
					<marketplace ref="marketplaceRef" />
				</scroll-view>
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	export default {
		name: "marketModules",
		data() {
			return {
				marketTabIndex: 1,
				marketTab: [
					'自选',
					'市场'
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.market-box {
		width: 100%;
		height: 90vh;
		background-color: $modules-box-bg;

		.market-tab {
			padding: 0 $pages-padding ;
			width: 100%;
			height: 114rpx;
			display: flex;
			align-items: center;

			.market-tab-item {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;
				line-height: 40rpx;
				letter-spacing: 0.6rpx;

				+.market-tab-item {
					margin-left: 50rpx;
				}
			}

			.active-tab-item {
				font-size: 30rpx;
				color: #20B482;
				position: relative;

				&::before {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -20rpx;
					content: '';
					width: 80%;
					height: 3px;
					border-radius: 2px;
					background-color: #20B482;
				}
			}

		}

		.market-content {
			width: 100%;
			height: calc(100% - 104rpx);

			.market-scroll {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>