uniapp 兩個scroll-view相互作用

如何在uniapp，scroll-view標題和scroll-view內容相互聯動效果?
talk is less, show the code:

<template>
	<view class="img-show-wrap fz">
		<scroll-view class="tabs-con" scroll-x="true" scroll-with-animation :show-scrollbar=false>
			<view class="tabs-con">
				<view class="tab-item" v-for="(item,i) in tabs" :key="i" @tap="onTabClick(i)" :class="{active:i==activeIndex}" :id="item.sid">
					<text>{{item.label}}</text>
				</view>
			</view>
		</scroll-view>
		<scroll-view class="main-con" @touchstart="mainTouch" id="main-con" scroll-y="true" scroll-with-animation :show-scrollbar=false @scroll="mainScroll" :scroll-into-view="scrollingId">
			<wrap>
				<view class="img-item" v-for="(item,i) in tabs" :key="i" :class="{active:i==activeIndex}" :id="item.id">
					<text class="tit">{{item.label}}</text>
					<view class="item-box">
						<image src="../../static/list/adv.png" />
						<image src="../../static/list/adv.png" />
						<image src="../../static/list/adv.png" />
						<image src="../../static/list/adv.png" />
						<image src="../../static/list/adv.png" />
						<image src="../../static/list/adv.png" />
					</view>
				</view>
			</wrap>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{ label: '雲視頻(2)', id: 'tab_0', sid: 'tab_11' },
					{ label: '樓盤概況(5)', id: 'tab_1', sid: 'tab_12' },
					{ label: '跑盤實拍(10)', id: 'tab_2' , sid: 'tab_13'},
					{ label: '地理交通(10)', id: 'tab_3' , sid: 'tab_14'},
				],
				activeIndex: 0,
				scrollingId: 'tab_0',
				isMainScroll: true
			};
		},
		methods: {
			mainTouch(){
				this.isMainScroll = true
			},
			mainScroll(e) {
				if (!this.isMainScroll) {
					return;
				}
				let top = e.detail.scrollTop;
				let index = -1;

				if (top >= this.topArr[this.topArr.length - 1]) {
					index = this.topArr.length - 1;
				} else {
					index = this.topArr.findIndex((item, index) => {
						return this.topArr[index + 1] >= top;
					});
				}
				this.activeIndex = (index < 0 ? 0 : index);
			},
			onTabClick(i) {
				this.activeIndex = i
				this.scrollingId = `tab_${i}`
				this.isMainScroll = false
			},
			//獲取元素距離頂部的高度
			getScrollTop(selector) {
				return new Promise((resolve, reject) => {
					let query = uni.createSelectorQuery().in(this);
					query.select(selector + '').boundingClientRect(data => {
						resolve(data.top)
					}).exec();
				})
			},
			/* 獲取元素頂部信息 */
			async getElementTop() {
				let p_arr = [];
			
				for (let i = 0; i < this.tabs.length; i++) {
					const resu = await this.getScrollTop(`#tab_${i}`)
					p_arr.push(resu)
				}

				/* 減掉主區域滾動容器的頂部距離 */
				this.getScrollTop("#main-con").then(res => {
					/* 所有節點信息返回後調用該方法 */
					this.topArr = p_arr.map(item => item-=res);
				})
			},
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
			　　title:'樂米選房-悅府'
			})
		},
		mounted() {
			this.getElementTop()
		}
	}
</script>

<style lang="scss">
.tabs-con{
	text-align: center;  line-height: 70rpx; position:fixed; top:0; width: 100%; font-size: 30rpx; white-space: nowrap; height:70rpx; 
	.tab-item{
		display:inline-block; margin: 0 10rpx;
		text{
			padding: 0 10rpx; display: inline-block;  position:relative;
			&:after{
				position: absolute; height: 1px; background: $theme; content: ""; transition: all .5s ease;
				bottom:0; left:0; width: 0; left: 50%; transform: translateX(-50%);
			}
		}
		&.active {
			font-weight: bold; color: $theme;
			text:after{
				width: 100%; 
			}
		}
	}
}

.img-item{
	height: 700rpx;  line-height: 80rpx;
	.item-box{
		margin: 10rpx -5rpx 0; 
	}
	image{
		width:25%; padding: 0 5rpx; float:left; height: 150rpx; box-sizing: border-box; margin-bottom: 10rpx;
	}
}
.main-con{
	height: calc(100vh - 70rpx);margin-top: 70rpx;
}

</style>

可以直接複製到項目中看效果

效果圖：