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-view绑定了一个动态绑定的数据默认为第一个首页标签

data() {
		return {
			// 表示跳转到地方的id
			scrollinto: 'tab1',
		}	
}
           

中间区域

中间区域使用一个swiper组件绑定了一个change事件，我们左右滑动会改变这个current。但我们这个tabIndex是绑定的数据无法直接改变，所以我们用一个change事件监听变化并且改变同一个tabIndex使上面选中的标签也进行变化。

最后的效果大概就是点击上面的标签，下面的内容开始切换，滑动下面的内容，上面选中的标签也开始切换。

本质上还是使用事件监听，与绑定同一个数据来达到这个效果。

@change	EventHandle	current 改变时会触发 change 事件	,event.detail = {current, source: source}

<swiper :current="tabIndex"  @change="onchangeTab">
			<swiper-item v-for="(item, index) in newsitems" :key="index">
				<scroll-view scroll-y="true" >
				</scroll-view>
			</swiper-item>
		</swiper>