uniapp scroll-view左侧菜单栏通过伪元素实现active选中效果

1.使用isActive绑定index的值，当isActive===index时显示当前样式

<!-- 左侧菜单栏 -->
<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false"
	:scroll-with-animation="true">
	<view @click="clickFirstCategory(index)" :class="['first-item',isActive===index?'active':'']"
		v-for="(category,index) in categoryList" :key="category.cat_id">
			{
   
   {category.cat_name}}
	</view>
</scroll-view>

2.在点击菜单时改变isActive

export default {
		data() {
			return {
				isActive: 0,
			};
		},
		methods: {
			clickFirstCategory(index) {
				this.isActive = index;
			}
		}

3.样式：主要时在.first-item里使用 &.active和&::before样式

.first-item {
					width: 80%;
					padding: 0 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 110rpx;
					line-height: 110rpx;
					font-size: 17px;
					border-bottom: 0.5px solid #e8e8e8;
					background-color: #f1f1f1;
					
					 // 激活项的样式：只有当前项才有伪元素
				  &.active {
						background-color: #ffffff;
						position: relative;
						
						&::before {
							content: "";
							// 必须使用position 绝对定位，否则出不来
							position: absolute;
							top: 0;
							left: 0;
							width: 4px;
							height: 110rpx;
							background-color: #bf2944;
						}
					}
				}