uniapp中菜单双联动效果（左侧点击右侧自动滚动到对应位置，右侧滚动左侧高亮对应菜单）_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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

效果如图：