uni-app 左右联动

 如果有问题  请指出

<template>
	<view  @touchend="touchend">
		<u-navbar class="navbar-zz" back-text="返回" title="分类" :is-back="false" :border-bottom="false"></u-navbar>
		
		<view class="u-flex u-col-top">
			<scroll-view class="scroll-view-left" scroll-y :scroll-with-animation="true" :scroll-top="scrollTop">
				<block v-for="(item,index) in primaryItemData" :key="index">
					<view class="list-col-left" :class="tagIndex == index ? 'active' : ''" @tap="btn(index)">{{item.name}}</view>
				</block>			
			</scroll-view>
			
			<scroll-view class="scroll-view-right" scroll-y :scroll-with-animation="true" :scroll-top="scrollTopRg" @scroll="scrollRight">
				<block v-for="(item,index) in primaryItemData" :key="index" >
					<view class="list-col-right" >
						<view>
							{{item.name}}
						</view>
					</view>
				</block>			
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
	data() {
		return {
			name: '你好',
			primaryItemData: [
				{ name: '项目1' },
				{ name: '项目2' },
				{ name: '项目3' },
				{ name: '项目4' },
				{ name: '项目5' },
				{ name: '项目6' },
				{ name: '项目7' },
				{ name: '项目8' },
				{ name: '项目9' },
				{ name: '项目11' },
				{ name: '项目12' },
				{ name: '项目13' },
				{ name: '项目14' },
				{ name: '项目15' },
				{ name: '项目16' },
				{ name: '项目17' },
				{ name: '项目18' },
				{ name: '项目19' },
				{ name: '项目20' },
				{ name: '项目21' },
			],
			scrollTop: 0,
			windowHeight: 0,
			scrollViewHeight: 0,
			tagIndex: 0,
			scrollRightTop: [],
			ind: 0,
			navHeight: 0,
			scrollTopRg: 0,
			show: true
		}
	},
	onLoad() {
		let that = this;
		 uni.getSystemInfo({
			 success(res) {
				 that.windowHeight = res.windowHeight
			 }
		 })
	},
	onShow() {
		let that = this;
		let info = uni.createSelectorQuery();
		let query = uni.createSelectorQuery();
		let navHeight = uni.createSelectorQuery();
		// 在电脑上运行测试加了setTimeout  小程序中不需要 理论上H5也不需要加setTimeout
　　　   setTimeout(() => {
			// 获取左边每个scroll-view的高度
		    info.select(".scroll-view-left").boundingClientRect(function(data) {
				that.scrollViewHeight = data.height
	　　     }).exec()
			navHeight.select(".navbar-zz").boundingClientRect(function(data) {
				that.navHeight = data.height
	　　     }).exec()
			// 获取右边scroll-view每个内容里顶部的距离
			query.selectAll('.list-col-right').boundingClientRect()
			query.exec(function (res) {
				for (var i = 0; i < that.primaryItemData.length; i++) {
					// 放入到一个数组内
					that.scrollRightTop.push(res[0][i].top)
				}
			})
		}, 1000)
	},
	methods: {
		// 左边点击事件 滚动
		btn(index) {
			let that = this
			let query = uni.createSelectorQuery();
			query.selectAll('.list-col-left').boundingClientRect()
			query.exec(function (res) {
				let scrollTop =  res[0][index].top
				if (that.tagIndex != 0 && that.tagIndex > index) {
					that.scrollTop = res[0][index].height * index - (that.tagIndex - index) * res[0][index].height
				} else {
					that.scrollTop = res[0][index].height * index
				}
				// 右边滚动到相应位置
				if (that.show) {
					that.scrollTopRg = that.scrollRightTop[index] - that.navHeight
				}
				// 记录是否往会滚的索引
				that.tagIndex = index;
			})
		},
		// 右边滚动事件
		scrollRight(event) {
			let that = this
			that.show = false
			// that.scrollTopRg = Math.random();
			// 滚动的时候取消右边滚动scrollTopRg
			let scrollTop = event.detail.scrollTop
			// 左边相应的滚动方法
			let index = that.scrollRightTop.findIndex((item, index) => {
				return scrollTop + that.navHeight >= that.scrollRightTop[index] && scrollTop + that.navHeight < that.scrollRightTop[index + 1]
			})
			index > 0 ? that.btn(index) : that.btn(0)
		},
		touchend() {
			this.show = true
		}
	}
}
</script>

<style lang="scss">
.list-col-left{
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.scroll-view-left{
	width: 25%;
	height: 80vh;
}


.active{
	color: red;
}


.scroll-view-right {
	width: 75%;
	height: 80vh;
}

.list-col-right{
	height: 200px;
}
	
</style>