uniapp的tabs,swiper,scroll模板

新手写的不是很好，请见谅

<template>
	<!-- 缺陷没做到transition监听line的移动，后面会完善 -->
	<view class="box">
		<!-- tabs部分 -->
		<view class="tabs">
			<view class="tabsList" :list="list" :active="active" v-for="(item,index) in list" @click="tabsClick(index)">
				<view class="tabsText" :class="{tabsText1:active==index}">{{item}}    </view>
				<view id="ref" class="tabsLine" :class="{tabsLine1:active==index}"></view>
			</view>
		</view>
		<!-- swiper，scroll滑动，滚动部分 -->
		<scroll-view scroll-y="true" style="height: 2000rpx;">
			<swiper @change="swiperClick" :current="current">
				<swiper-item>
					<view class="swiper-item">111</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">222</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">333</view>
				</swiper-item>
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ["我的", "专业", "他的", ],
				active: 0,
				current: 0,
			}
		},
		methods: {
			tabsClick(index) {
				this.current = index
			},
			swiperClick(e) {
				this.active = e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
	}
	//顶置tabs
	.tabs {
		position: sticky;
		position: -webkit-sticky;
		top: var(--window-top);
		display: flex;
		flex-flow: row;
		z-index: 99;
		background-color: #fff;
	}

	//设置默认样式
	.tabsText {
		color: black;
		font-size: 28rpx;
		margin-right: 50rpx;
	}

	// 设置点击样式
	.tabsText1 {
		color: red;
		font-size: 36rpx;
	}
	.tabsLine1 {
		width: 30rpx;
		height: 4rpx;
		background-color: red;
	}
</style>