uniapp实现左侧滚动条item选中样式

要实现如下效果

代码如下

<template>
	<view class="main">
		<scroll-view scroll-y class="left_sv">
			<view class="menu_item" v-for="(item, index) in list" :key="item.id" :class="active_index === item.id ? 'active' : ''" @click="handle_tab(index)">{{ item.name }}</view>
		</scroll-view>
		<scroll-view scroll-y class="right_sv">
			<view>2233333333333333333333</view>
			<view>2222222222222222</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active_index: 0,
			list: [
				{
					id: 0,
					name: 'hello'
				},
				{
					id: 1,
					name: 'hello1'
				},
				{
					id: 2,
					name: 'hello2'
				},
				{
					id: 3,
					name: 'hello3'
				}
			]
		};
	},

	methods: {
		handle_tab(index) {
			this.active_index = index;
		}
	}
};
</script>

<style lang="scss">
.main {
	display: flex;
	height: 100vh;
	.left_sv {
		flex: 2;
		.menu_item {
			padding: 20rpx 0;
			text-align: center;
			font-size: 40rpx;
			background-color: #dd524d;
			margin-bottom: 10rpx;
		}
		.active {
			font-size: 50rpx;
			color: #f0ad4e;
		}
	}
	.right_sv {
		flex: 5;
		background-color: #4cd964;
	}
}
</style>