un-app 关于顶部与内容区的联合滑动

关于如何实现顶部区域与内容区的联动

顶部选项卡部分

使用一个scroll-view组件在组件上方使用一scroll-x使之水平方向滑动并为下面的view标签绑定了一个id

并且绑定了一个changeTab事件这个tabIndex就是tab目前选中的标签与内容中显示的内容

method:{
// 点击切换选项卡
		changeTab(index) {
			if (this.tabIndex === index) {
				return;
			}
			this.tabIndex = index;
		},
}

<scroll-view 
		scroll-x 
		:scroll-into-view="scrollinto" :scroll-with-animation="true">
			<view
				:class="tabIndex === index ? 'main-text-color' : ''"
				v-for="(item, index) in tabBar"
				:key="index"
				:id="'tab' + index"
				@click="changeTab(index)"
			>
				<text class="font-md">{
  { item.name }}</text>
			</view>
		</scroll-view>

然后再为scroll-into-vi