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>