分类左右联动

<template>
	<view class="content">
		 <scroll-view class="left" scroll-y="true" >
		 	<template v-for="(item,index) in oneList">
		 		<view @tap="active" :data-id="'c'+index">
					{{item}}
				</view>
		 	</template>
			
		 </scroll-view>
		 <scroll-view class="right" scroll-y="true" :scroll-into-view="activeId" >
		 	<template v-for="(item,index) in twoList">
		 		<view class="rWrap"  :id="'c'+index" >
                    <template>
                    	<view class="rBox" v-for="value in item">
							{{value.name}}
						</view>
                    </template>					 
				</view>
		 	</template>
		 </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeId:'c0',
			  oneList:[
				  "手机",
				  "电脑",
				  "矿泉水",
				  "面包",
				  "衣服",
				  "游戏",
				  "键盘"
				 
			  ],
			  twoList:[
				[
				{id:"c0",name:"苹果"},
				{id:"c1",name:"华为"},
				{id:"c2",name:"小米"},
				],
				[
				{id:"c0",name:"外星人"},
				{id:"c1",name:"玩家国度"},
				{id:"c2",name:"戴尔"},
				],
				[
				{id:"c0",name:"娃哈哈"},
				{id:"c1",name:"冰露"},
				{id:"c2",name:"可口可乐"},
				],
				[
				{id:"c0",name:"盼盼"},
				{id:"c1",name:"三只松鼠"},
				{id:"c2",name:"良品铺子"},
				],
				[
				{id:"c0",name:"阿迪达斯"},
				{id:"c1",name:"耐克"},
				{id:"c2",name:"李宁"},
				],
				[
				{id:"c0",name:"苹果"},
				{id:"c1",name:"华为"},
				{id:"c2",name:"小米"},
				],
				[
				{id:"c0",name:"雷蛇"},
				{id:"c1",name:"海盗船"},
				{id:"c2",name:"因特尔"},
				],
				
			  ],
			  
			  
			}
		},
		onLoad() {

		},
		methods: {
 
	active(e){
 	   console.log(e.currentTarget.dataset.id)
	   this.activeId=e.currentTarget.dataset.id
     }
		
		
		}
	}
</script>

<style scoped>
    .content{
		display: flex;

	}
	.left{
		width: 30vw;
		height: 50vh;
		background-color: #999999;
	}
	.right{
		width: 70vw;
		height: 50vh;
		background-color: #F0AD4E;
	}
    .left view{
		height: 10vh;
		border: 1px solid #4CD964;
		text-align: center;
        line-height: 10vh; 
	}
	.rWrap{
		height: 20vh;
		border: 1px solid #3F536E;
		margin-bottom: 3vh;
	}
	.rBox{
		
	}
</style>