vue 中js+css实现Tabs页面切换

需求：Tabs顶部固定，点击跳转到对应标题位置，并高亮对应tab名

页面代码：

<view class="topMenu">
	<view :class="isActive==item.id?'isIndex':'isActives'" v-for="(item,index) in listTab" :key="index"
	@click="oneSelect('#anchor-'+index)">
		<view class="tab_on" v-show="isActive==item.id"></view>
		<view class="tabName">{{item.name}}</view>
	</view>
</view>

js代码：

oneSelect(selector) {
	this.isActive =parseInt(selector.slice(8, 9))+1;
    this.$el.querySelector(selector).scrollIntoView();
}

css代码:

	.tab_on {
		margin-right: 16rpx;
		height: 28rpx;
		width: 6rpx;
		background: linear-gradient(90deg, #6193FF 0%, #2D6DF7 100%);
		box-shadow: 4rpx 2rpx 14rpx 0rpx rgba(45, 109, 247, 0.2);
		border-radius: 4rpx;
	}
 
	.isIndex {
		display: flex;
		font-weight: 500;
		color: #2D6DF7;
		align-items: center;
		font-size: 16px;
	}
 
	.isActives {
		font-size: 16px;
		display: flex;
		color: #808080;
		align-items: center;
	}

data:

data(){
	return{
		isActive:1,
		listTab:[{
			id:1,
			name:xxx
		},
		...
	}
}