前言

本次主要內(nèi)容是介紹頁(yè)面tab的開發(fā)，如何實(shí)現(xiàn)tab與頁(yè)面內(nèi)容聯(lián)動(dòng)呢？關(guān)注我就知道！

本次效果展示

如何實(shí)現(xiàn)頁(yè)面tab

1.使用內(nèi)置組件scroll-view

如下圖所示，我們需要使用到紅色框框中的屬性，此屬性可也實(shí)現(xiàn)滾動(dòng)

這里有一個(gè)大坑，不管是使用scroll-x還是scroll-y遍歷數(shù)據(jù)都是出現(xiàn)在左邊一數(shù)列（這里我們只關(guān)注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.實(shí)現(xiàn)點(diǎn)擊時(shí)出現(xiàn)的背景樣式

這里我們需要定義一個(gè)默認(rèn)的索引currentIndex,在通過點(diǎn)擊事件所傳出去的索引進(jìn)行判斷，從而獲得當(dāng)前所點(diǎn)擊的對(duì)象給到樣式，樣式我們就用三元表達(dá)式判斷賦予樣式，如下點(diǎn)擊方法

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

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

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

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

3.scroll-into-view

使用scroll-into-view，實(shí)現(xiàn)點(diǎn)擊時(shí)自動(dòng)滾動(dòng)

使用它的目的主要是，在點(diǎn)解tab時(shí)可以實(shí)現(xiàn)，你向那個(gè)方向點(diǎn)，他就往那個(gè)方向滾動(dòng)，不過在點(diǎn)回去的時(shí)候，就有坑了，需要對(duì)其作出判斷

閱讀文檔很難理解對(duì)吧，我在這里說說我的理解，這里是想要我們通過在scroll-view中屬性scroll-into-view綁定一個(gè)元素，此元素還要獲得id,此id還不能已數(shù)字開頭，此id就是移動(dòng)的關(guān)鍵，需要綁定，所遍歷內(nèi)容的索引，從而實(shí)現(xiàn)往哪里滾動(dòng)，不過想點(diǎn)回去就需要進(jìn)行判斷

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

在v-for遍歷后獲得了索引，id就通過索引進(jìn)行了綁定,拼接了以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>

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

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

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)tab組件切換動(dòng)畫的文章就介紹到這了,更多相關(guān)小程序tab組件切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論