用vue写一个tabs切换，控制样式变化

效果图

<block v-for="(item,i) in cateList" :key="i">
		<view :class="['left-scroll-view-item',i === active ? 'active' : '']" @click="activeChanged(i)">
						{{item.cat_name}}
		</view>
</block>

 

data() {
			return {
				cateList: [],
				active: 0,
			};
},

methods: {

			activeChanged(i) {
				this.active = i
			}
		}

 

 cateList是从后端获取的数据

scss语法 自己微调

.left-scroll-view-item {
				background-color: #F7F7F7;
				line-height: 120rpx;
				text-align: center;
				font-size: 24rpx;

				&.active {
					background-color: #fff;
					position: relative;

					&::before {
						position: absolute;
						content: '';
						display: block;
						width: 6rpx;
						height: 60rpx;
						background-color: #C00000;
						top: 50%;
						left: 0%;
						transform: translateY(-50%);
					}
				}
			}