微信小程序，点击tab，使当前tab出现的视野中 或者 滑动下面的swiper，使当前的tab出现在视野中（用的uni-app）（滑动的tab）

主要是 scroll-view 这个组件的使用，以及每一个tabItem一些属性的计算

<template>
	<view id="estimate-answerV2" class="estimate-answerV2">
		<view class="tab-nav">
			<scroll-view :enable-flex="true" scroll-with-animation :throttle="false" :scroll-left="scrollToLeft" scroll-x
			 @scroll="handleScroll">
				<view class="tab-list">
					<block v-for="(tab,index) in tabList" :key="tab.value">
						<view class="tab-item" @click.stop="tabClick(tab)" :class="currentTab.value == tab.value?'active':''">
							{{tab.name}}
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="tab-content">
			<swiper class="swiper-box" :current="currentSwiper" :duration="duration" @change="change">
				<block v-for="(swiper) in tabList" :key="swiper.value">
					<swiper-item>
						<view class="swiper-item">
							{{swiper.name}}
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>
<script>
	export default {
		components: {
		},
		data() {
			return {
				tabList: [],
				tabItemInfo: [],
				currentSwiper:0,
				duration:500,
				currentTab: {
					name:'',
					value:'',
					index:''
				},
				scrollToLeft: 0,
				parentLeft: 0,
				parentWidth: 0,
				
			}
		},
		mounted() {
			this.getTabList()
		},
		methods: {
			//获取tabList
			getTabList(){
				this.tabList = [
					{
						name:"Ⅰ Use of English",
						value:0,
						index:0
					},
					{
						name:"Ⅱ Reading Comprehension",
						value:1,
						index:1
					},
					{
						name:"Ⅲ Writing",
						value:2,
						index:2
					},
				]
				this.$nextTick(() => {
					this.initScroll()
				})
			},
			change(e){
				this.currentSwiper = e.detail.current;
				this.currentTab = this.tabList[e.detail.current]
				this.scrollDom(e.detail.current);
			},
			/*获取辅助数据*/
			initScroll() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-list').fields({
					rect: true,
					size: true
				}, res => {
					this.parentLeft = res.left;
					this.parentWidth = res.width;
				});
				//获取每个tabitem的宽度以及距离左边的距离
				query.selectAll('.tab-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						this.tabItemInfo.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
			},
			handleScroll(e) {
				//this.scrollDom()
			},
			/*tab的点击事件*/
			tabClick(tab, position) {
				this.currentTab = tab
				this.currentSwiper = tab.value;
				this.scrollDom(tab.value);
			},
			/*
			使scroll滚动，显示当前tab
				@param {*} index 当前tab的下标
			*/
			scrollDom(index) {
				let info = this.tabItemInfo[index];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.parentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	#estimate-answerV2 {
		height: 100%;

		.tab-nav {
			width: 100%;
			height: 72rpx;
			background: #fff;

			.tab-list {
				height: 100%;
				white-space: nowrap;

				.tab-item {
					display: inline-block;
					position: relative;
					padding: 0 18rpx;
					box-sizing: border-box;
					height: 100%;
					line-height: 72rpx;
					color: #bbb;
					transition: all linear .1s;

					&:after {
						content: "";
						position: absolute;
						bottom: rpx;
						left: 50%;
						bottom: 2rpx;
						width: 65rpx;
						height: 8rpx;
						transform: translateX(-50%);
						background: transparent;
						border-radius: 5rpx;
					}

					&.active {
						color: #222;
						font-weight: bold;

						&:after {
							background: linear-gradient(-23deg, #EC3D2F, #FC675B)
						}

					}
				}

			}
		}

		.tab-content {
			height: calc(100% - 72rpx);
			.swiper-box,.swiper-item{
				height: 100%;
			}
			.swiper-item{
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>