微信小程序實現tab組件切換動畫

更新時間：2022年10月25日 14:57:29 作者：小余努力搬磚

tab相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關于微信小程序全局配置之tab的相關資料,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

本次主要內容是介紹頁面tab的開發(fā)，如何實現tab與頁面內容聯動呢？關注我就知道！

本次效果展示

如何實現頁面tab

1.使用內置組件scroll-view

如下圖所示，我們需要使用到紅色框框中的屬性，此屬性可也實現滾動

這里有一個大坑，不管是使用scroll-x還是scroll-y遍歷數據都是出現在左邊一數列（這里我們只關注scroll-x、scroll-y）

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
		:class="currentIndex==index?'active':''" @click="changeTab(index)">
	{{item}}
</view>
</scroll-view>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'">
	<view v-for="(item,index) in 100 " :key='index'>
		{{item}}
	</view>
</scroll-view>

我們只能通過樣式來改變它，讓它橫過來

    .scroll-view-t view {
		display: inline-block;
		font-size: 32rpx !important;
		margin: 0 15rpx;
	}
	.scroll-view-t {
		white-space: nowrap;
		height: 88rpx;
		line-height: 88rpx;
	}

2.實現點擊時出現的背景樣式

這里我們需要定義一個默認的索引currentIndex,在通過點擊事件所傳出去的索引進行判斷，從而獲得當前所點擊的對象給到樣式，樣式我們就用三元表達式判斷賦予樣式，如下點擊方法

changeTab(index) { //nabbar欄點擊切換
				// if (this.currentIndex === index) return
				this.currentIndex = index
				// this.scrollinto = 'tab' + index
				// if (this.currentIndex < 10) {
				// 	this.scrollinto = 'tab0'
				// }
			},

如下是綁定的點擊事件和三元表達式判斷賦予樣式，其中背景樣式提前寫好了

<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
	:class="currentIndex==index?'active':''" @click="changeTab(index)">
	{{item}}
</view>

不過現在只實現了通過點擊樣式發(fā)生改變，感覺實現了tab切換，眼下要解決點擊時tab這個導航條也要自己滾動起來，不能一邊手動滾動，然后再點擊吧

3.scroll-into-view

使用scroll-into-view，實現點擊時自動滾動

使用它的目的主要是，在點解tab時可以實現，你向那個方向點，他就往那個方向滾動，不過在點回去的時候，就有坑了，需要對其作出判斷

閱讀文檔很難理解對吧，我在這里說說我的理解，這里是想要我們通過在scroll-view中屬性scroll-into-view綁定一個元素，此元素還要獲得id,此id還不能已數字開頭，此id就是移動的關鍵，需要綁定，所遍歷內容的索引，從而實現往哪里滾動，不過想點回去就需要進行判斷

如下代碼中在scroll-view，使用scroll-into-view綁定了一個自己定義的空元素scrollinto

在v-for遍歷后獲得了索引，id就通過索引進行了綁定,拼接了以tab開頭

<scroll-view scroll-x="true" class='scroll-view-t' :scroll-into-view="scrollinto">
			<view v-for="(item,index) in 20 " :key='index' :id="'tab'+index" 
			:class="currentIndex==index?'active':''" @click="changeTab(index)">
				{{item}}
			</view>
</scroll-view>

實現點擊滾動很簡單，要滾動回去就要判斷了，如下代碼，只要當前的this.scrollinto = 'tab' + index就能實現點擊就滾動，回去是就要判斷當前點擊的縮影，手動賦值，給一個最好的區(qū)間，這樣效果更好

changeTab(index) { //nabbar欄點擊切換
				if (this.currentIndex === index) return
				this.currentIndex = index
				this.scrollinto = 'tab' + index
				if (this.currentIndex < 10) {
					this.scrollinto = 'tab0'
				}
			},

到此這篇關于微信小程序實現tab組件切換動畫的文章就介紹到這了,更多相關小程序tab組件切換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: