目錄
前言
本次效果展示
一、如何實(shí)現(xiàn)頁(yè)面tab
1.使用內(nèi)置組件scroll-view
2.實(shí)現(xiàn)點(diǎn)擊時(shí)出現(xiàn)的背景樣式
3.使用scroll-into-view，實(shí)現(xiàn)點(diǎn)擊時(shí)自動(dòng)滾動(dòng)
前言
本次主要內(nèi)容是介紹頁(yè)面tab的開發(fā)，如何實(shí)現(xiàn)tab與頁(yè)面內(nèi)容聯(lián)動(dòng)呢？關(guān)注我就知道！
本次效果展示
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-484311.html
一、如何實(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>
我們只能通過(guò)樣式來(lái)改變它，讓它橫過(guò)來(lái)
.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,在通過(guò)點(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>?不過(guò)現(xiàn)在只實(shí)現(xiàn)了通過(guò)點(diǎn)擊樣式發(fā)生改變，感覺實(shí)現(xiàn)了tab切換，眼下要解決點(diǎn)擊時(shí)tab這個(gè)導(dǎo)航條也要自己滾動(dòng)起來(lái)，不能一邊手動(dòng)滾動(dòng)，然后再點(diǎn)擊吧
3.使用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)，不過(guò)在點(diǎn)回去的時(shí)候，就有坑了，需要對(duì)其作出判斷?
?閱讀文檔很難理解對(duì)吧，我在這里說(shuō)說(shuō)我的理解，這里是想要我們通過(guò)在scroll-view中屬性scroll-into-view綁定一個(gè)元素，此元素還要獲得id,此id還不能已數(shù)字開頭，此id就是移動(dòng)的關(guān)鍵，需要綁定，所遍歷內(nèi)容的索引，從而實(shí)現(xiàn)往哪里滾動(dòng)，不過(guò)想點(diǎn)回去就需要進(jìn)行判斷
如下代碼中在scroll-view，使用scroll-into-view綁定了一個(gè)自己定義的空元素scrollinto
在v-for遍歷后獲得了索引，id就通過(guò)索引進(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'
}
},結(jié)束語(yǔ)：
本次分享到此結(jié)束，有問(wèn)題可以找我嗷?。?！
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-484311.html
?
到了這里，關(guān)于【微信小程序】實(shí)現(xiàn)頁(yè)面tab切換效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
