微信小程序使用的是類似MVVM類型的框架，本質(zhì)是數(shù)據(jù)驅(qū)動(dòng)視圖，換句話來(lái)說(shuō)就是邏輯層（javascript）去驅(qū)動(dòng)界面層（view）的改變，功能實(shí)現(xiàn)核心主要在于操作數(shù)據(jù)。
下面來(lái)詳細(xì)講解，微信小程序如何實(shí)現(xiàn)tab切換功能，如下圖所示：
第一步:
在wxml文件里面，搭建結(jié)構(gòu)。其中，tab盒子是tab整體，btns里面的view是切換按鈕，cons里面的view是切換的盒子內(nèi)容。
wxml:
<!--index.wxml-->
<view class="tab">
<view class="btns">
<view></view>
</view>
<view class="cons">
<view></view>
</view>
</view>
第二步:
把切換按鈕btns和內(nèi)容cons渲染出來(lái)。在js文件里面書寫數(shù)據(jù)，并且在wxml文件里面通過(guò)wx:for進(jìn)行列表渲染輸出。
js:
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
btns:["PS","RP","AE","C4D"],
cons: ["PS", "RP", "AE", "C4D"],
}
})
wxml:
<!--index.wxml-->
<view class="tab">
<view class="btns">
<view wx:for="{{btns}}">{{item}}</view>
</view>
<view class="cons">
<view wx:for="{{cons}}">{{item}}</view>
</view>
</view>
第三步：
通過(guò)彈性布局去書寫樣式。添加cur當(dāng)前類名去控制當(dāng)前按鈕的樣式和當(dāng)前顯示的內(nèi)容盒子。
注意微信小程序使用的是rpx可以自適應(yīng)的單位，規(guī)定所有屏幕寬度為750rpx，在iPhone6設(shè)備屏幕寬度換算是2rpx=1px。
wxss:
.tab{width: 96%; height:600rpx; border:2rpxsolid #cccccc; margin:60rpx auto;}
.tab .btns{ height: 120rpx; background: #eeeeee;display: flex;}
.tab .btns view{flex: 1; text-align: center; line-height:120rpx;}
.tab .btns .cur{background: #ffffff;}
.tab .cons view{height: 480rpx;display: none; text-align: center; line-height:480rpx; font-size:60rpx;}
.tab .cons .cur{display: block;}
js:
邏輯層添加了active數(shù)據(jù)控制當(dāng)前顯示盒子。
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
btns:["PS","RP","AE","C4D"],
cons: ["PS", "RP", "AE", "C4D"],
active:0,//控制當(dāng)前顯示盒子
}
})
wxml:
wxml要書寫判斷驗(yàn)證去控制盒子是否有cur類名。
class="{{index==active?'cur':''}}"
上面表達(dá)式表示，如果當(dāng)前項(xiàng)的索引值index等于數(shù)據(jù)active，則此項(xiàng)有cur這個(gè)類名，否則就沒(méi)有。注意cur類名是控制當(dāng)前按鈕樣式和當(dāng)前顯示內(nèi)容盒子的。
<!--index.wxml-->
<view class="tab">
<view class="btns">
<view wx:for="{{btns}}" class="{{index==active?'cur':''}}">{{item}}</view>
</view>
<view class="cons">
<view wx:for="{{cons}}" class="{{index==active?'cur':''}}">{{item}}</view>
</view>
</view>
第四步：
有cur這個(gè)類名的按鈕會(huì)顯示當(dāng)前的樣式，有cur這個(gè)類名的內(nèi)容盒子是顯示的，但是否有這個(gè)類名是通過(guò)active這個(gè)數(shù)據(jù)決定的。所以最后我們只需要把a(bǔ)ctive這個(gè)數(shù)據(jù)的值修改成用戶點(diǎn)擊按鈕的索引值即可實(shí)現(xiàn)tab切換功能。
首先要給按鈕btn自定義索引值等于循環(huán)當(dāng)前項(xiàng)的index，微信小程序給組件自定義索引值是通過(guò)在組件身上添加data-index=”{{index}}”屬性，然后在js里面即可通過(guò)事件對(duì)象里面的e.currentTarget.dataset.index屬性獲取用戶點(diǎn)擊按鈕的索引值。
wxml:
給按鈕自定義索引值和綁定事件，綁定點(diǎn)擊事件通過(guò)給按鈕組件添加屬性bindtap=“函數(shù)名”，此處設(shè)置函數(shù)名為toggle。
<!--index.wxml-->
<view class="tab">
<view class="btns">
<view wx:for="{{btns}}" class="{{index==active?'cur':''}}" data-index="{{index}}" bindtap="toggle">{{item}}</view>
</view>
<view class="cons">
<view wx:for="{{cons}}" class="{{index==active?'cur':''}}">{{item}}</view>
</view>
</view>
js:
把a(bǔ)ctive的值設(shè)置為用戶點(diǎn)擊按鈕的索引值，即可實(shí)現(xiàn)tab切換功能。
e.currentTarget.dataset.index獲取用戶點(diǎn)擊按鈕的索引值，微信小程序通過(guò)this.setData()去修改data里面的數(shù)據(jù)內(nèi)容。
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
btns:["PS","RP","AE","C4D"],
cons: ["PS", "RP", "AE", "C4D"],
active:0,//控制當(dāng)前顯示盒子
},
toggle:function(e){
//console.log(e.currentTarget.dataset.index)
this.setData({
//設(shè)置active的值為用戶點(diǎn)擊按鈕的索引值
active:e.currentTarget.dataset.index,
})
}
})
