侧边栏显示与点击

<template>
	<view class="content">
		<scroll-view class="left" scroll-y>
			<view :class="active===index?'active':''" v-for="(item,index) in Option" :key="index" @tap="getResult(index)">{{item}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y v-if="active==0">
			<view class="right-content" v-for="(lab,it) in Img" :key="it">
				<image :src="lab.image"></image>
				<text>{{lab.tlite}}</text>
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y v-if="active==1">
			<view class="right-content" v-for="(lab,it) in ImgA" :key="it">
				<image :src="lab.image"></image>
				<text>{{lab.tlite}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Option: ['java', '前端', 'PHP', '美工', '体育', '马克思', '英语', '高数', '体育', '马克思', '英语', '高数'],
				Img:[{image:'../../static/logo.png',tlite:'开心就好！！！'},{image:'../../static/logo.png',tlite:'开心就好！！！'},{image:'../../static/logo.png',tlite:'开心就好！！！'}],
				ImgA:[{image:'../../static/logo.png',tlite:'快乐就好！！！'},{image:'../../static/logo.png',tlite:'快乐就好！！！'},{image:'../../static/logo.png',tlite:'快乐就好！！！'}],
				active: 0
			}
		},
		onLoad() {
			this.trigger();
		},
		methods: {
			trigger:function(){
				var that = this
				if(that.active==1){
					that.Img=that.ImgA;
				}
			},
			getResult: function(e) {
				var that = this
				console.log('数量',e)
				that.active=e;
			}

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%; //实现效果的重点地方
	}

	.content {
		height: 100%;
		display: flex;
		.left {
			height: 100%;
			width: 200rpx;

			view {
				height: 160rpx;
				line-height: 160rpx;
				color: #007AFF;
				text-align: center;
				border-bottom: #eee solid 1rpx;
			}
			.active {
				background: #DD524D;
				color: #FFFFFF;
			}
		}
		.right{
			height: 100%;
			width: 500rpx;
			margin: 0 auto;
			.right-content{
				image{
					width: 490rpx;
					height: 490rpx;
					border-radius: 20rpx;
				}
				text{
					line-height: 60rpx;
					text-align: center;
				}
			}
			
		}
	}
</style>