uniapp切换滑动标签页

1.html代码

	<view class="">
			<scroll-view scroll-x="true" :scroll-with-animation='true class="scroll-view" :scroll-into-view="tid">
				<view v-for="(item,index) in lbList" :key='index' class="scroll-icon"  :id="'text'+index" @click="changeColor(index)" :class="[indexs == index ? 'active' :'']">
					{{item.title}}
				</view>
			</scroll-view>
		</view>

2.css代码

	.scroll-view{white-space: nowrap;padding: 0 4%;}
	.scroll-icon{display: inline-block;padding:1rem;}
	.active{position: relative;}
	.active::after{position: absolute;content: '';width: 40rpx;height: 4rpx;background-color: #FE3B0F;bottom: 22rpx;left: 50%;transform: translateX(-50%);}

3.js代码

export default {
		data(){
			return{
				indexs:0,
				lbList:[],
				tid:''
			}
		},
		methods:{
     	changeColor(e){
				this.indexs = e;
				this.tid = 'text'+e;
			},
}

}