uniapp中的横向选项卡 轮播图和选项卡结合

<template>
	<view>
		<scroll-view class="tabCard" enable-flex scroll-x :scroll-into-view="scrollIntoView" scroll-with-animation>
			<view class="tab-item" 
			:class="{'tab-active': index === currentIndex}" 
			v-for="(ele, index) in tabList"
			@click="clickTabItem(index)"
			:id="'index'+index">
				{{ele}}
			view>
		scroll-view>
		<swiper :current="currentIndex" @change="swiperChange" @transition="swiperTransition">
			<swiper-item>
				<view class="swiper-item">1view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">2view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">3view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">4view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">5view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">6view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">7view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">8view>
			swiper-item>
			<swiper-item>
				<view class="swiper-item">9view>
			swiper-item>
		swiper>
	view>
template>

<script>
	export default {
		data() {
			return {
				tabList: ['首页','关于','我们','首页','关于','我们','首页','关于','我们'],
				currentIndex: 0,
				scrollIntoView: 'index0'
			}
		},
		methods: {
			clickTabItem (index) {
				this.currentIndex = index
			},
			swiperChange (e) {
				// if(e.detail.current === 2) {
				// 	this.scrollIntoView = 'index' + 0
				// }
				// if(e.detail.current === 3) {
				// 	this.scrollIntoView = 'index' + 1
				// }
				// if(e.detail.current === 4) {
				// 	this.scrollIntoView = 'index' + 2
				// }
				// if(e.detail.current === 5) {
				// 	this.scrollIntoView = 'index' + 3
				// }
				// if(e.detail.current === 6) {
				// 	this.scrollIntoView = 'index' + 4
				// }
				if(e.detail.current>= 2) {
				this.scrollIntoView = 'index' + (e.detail.current-2)
				}
				this.currentIndex = e.detail.current
			},
			swiperTransition (e) {
				// console.log(e)
			}
		},
		components: {
		},
	}	
script>

<style lang="less">
	.tabCard {
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		display: flex;
		
		.tab-item {
			width: 20%;
			box-sizing: border-box;
			// border: 1px solid black;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.tab-active {
			border-bottom: 1px solid black;
		}
	}
style>