要实现如下效果
代码如下
<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>