uniapp中菜单双联动效果（左侧点击右侧自动滚动到对应位置，右侧滚动左侧高亮对应菜单）

<template>
	<view class="content">
		<view class="ld">
			<!-- :class="{active:index===change}" -->
			<view class="left">
				<view 
				v-for="(item,index) in kindlist" 
				:key="index" @click="setid(index)"
				:class="index===change?'active':''"
				>
					{{item.title}}
				</view>
			</view>
			<view class="right">
				<scroll-view 
				:scroll-y="true" 
				style="white-space: nowrap;height: 200px;" 
				:scroll-into-view="clickId"
				:scroll-with-animation="true"
				@scroll="scroll"
				@scrolltolower="scrolltolower "
				>
					<view v-for="(item,index) in kindlist" :key="index">
						<text class="title" :id="'po'+index">{{item.title}}</text>
						<view v-for="(item2,index2) in item.list" :key="index2">
							{{item2}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kindlist: [{
						title: "水果",
						list: ["苹果", "香蕉", "桔子", "芒果"]
					},
					{
						title: "家电",
						list: ["电视", "冰箱", "空调", "热水器"]
					},
					{
						title: "美食",
						list: ["牛排", "汉堡", "芝士", "意面"]
					},
					{
						title: "衣物",
						list: ["T 恤", "卫衣", "短裤", "帽子"]
					}
				],
				clickId: "",
				change:0,
				topList:[],
				isLeftClick:false
			}
		},
		onReady() {
			this.getNodesInfo();
		},
		methods: {
			setid(i) {
				this.clickId = "po" + i;
				this.change = i;
				this.isLeftClick=true;
			},
			scroll(e){
				if(this.isLeftClick){
					this.isLeftClick=false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				// 只能变前第三个，最后一个到不了底部，只能用滚动到底部事件
				for(let i=0;i<this.topList.length;i++){
					let h1 = this.topList[i];
					let h2 = this.topList[i+1];
					if(scrollTop>h1&&scrollTop<h2){
						this.change = i;
					}
				}
			},
			// 滚动到底部
			scrolltolower(){
				setTimeout(()=>{
					this.change = 3;
				},80)
			},
			getNodesInfo(){
				//小程序没有doucument和window对象(undefined)
				const query =uni.createSelectorQuery().in(this);
				query.selectAll(".title").boundingClientRect().exec(res=>{
					let nodes = res[0];
					let arr = [];
					nodes.map(item=>{
						arr.push(item.top);
					})
					this.topList = arr;
				})
			}
		}
	}
</script>

<style lang="scss">
	.ld {
		display: flex;
		border: 1px solid black;
		.left {
			width: 100px;
			text-align: center;
			border-right: 1px dashed #007AFF;
			
		}
		.right {
			flex: 1;
			padding-left: 10px;
		}
	}
	.title {
		font-size: 20px;
		font-weight: bold;
		background-color: pink;
	}
	.active{
		background-color: #00FFFF;
		color: #ffffff;
	}
</style>

效果如图：