微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于操作数据。
下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示：
第一步:
在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。
wxml:
<!--index.wxml-->
<view class="tab">
<view class="btns">
<view></view>
</view>
<view class="cons">
<view></view>
</view>
</view>
第二步:
把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。
js:
//index.js
//获取应用实例
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>
第三步：
通过弹性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。
注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是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数据控制当前显示盒子。
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
btns:["PS","RP","AE","C4D"],
cons: ["PS", "RP", "AE", "C4D"],
active:0,//控制当前显示盒子
}
})
wxml:
wxml要书写判断验证去控制盒子是否有cur类名。
class="{{index==active?'cur':''}}"
上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。
<!--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这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。
首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。
wxml:
给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为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:
把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。
e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
btns:["PS","RP","AE","C4D"],
cons: ["PS", "RP", "AE", "C4D"],
active:0,//控制当前显示盒子
},
toggle:function(e){
//console.log(e.currentTarget.dataset.index)
this.setData({
//设置active的值为用户点击按钮的索引值
active:e.currentTarget.dataset.index,
})
}
})
