UNIAPP----tabs横向滑动选择效果

效果   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓   可横向滑动，内容自己可填，点击变色

 

<view class="dangantabs_wai">
			<view class="dangantabs">
				<view style="margin: 0 20rpx;display: flex;justify-content: center;align-items: center;" v-for="(item,index) in tap" :key="index" @click="dianji(index)" :class="index == active1 ? 'active1' : ''">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

.dangantabs_wai {
	height: 90rpx;
	background-color:#F2F2F2;
	display: flex;
	font-size: 32rpx;
	color: #323232;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}
.dangantabs {
	left: 0px;
	top: 0px;
	position: absolute;
	height: 90rpx;
	white-space: nowrap;
	display: flex;
}
.active1{
	color: #00CE88;
	font-size: 36rpx;
	font-weight: bold;
}

data里

   active1:" ",

JS

dianji(index){
				this.active1=index				
},

v-for的tap数组是自己的