微信小程序开发中经常用到选项卡，微信没有自带的选项卡，不过可以用其他的功能组合成选项卡，非常简单。
image.png
image.png
需要用到的功能：
1. 标签绑定数据及获取
data-current="" 绑定数据到标签中，获取：e.currentTarget.dataset.current;//获取到绑定的数据
2.catchtap 添加事件。
3.通过js数据值，判断需要显示隐藏或者是class样式
class='{{menuTapCurrent=="0"?"btn_selected":""}}'
hidden="{{menuTapCurrent!='0'}}"
原理很简单，设置一个数据，初始值给0，也就是选中第一个，如：选项卡三个按钮三个页面，数值设置0 、1、2 ；然后点击的时候获取标签中绑定的是几，然后对应设置数据为几，标签中样式和显示隐藏根据数据判断，绑定好。
// js
Page({
data:{
menuTapCurrent:0
},
// 点击按钮选项卡切换
menuTap: function (e) {
var current = e.currentTarget.dataset.current;//获取到绑定的数据
//改变menuTapCurrent的值为当前选中的menu所绑定的数据
this.setData({
menuTapCurrent: current
});
}
});
//wxml
<view class="center_busLine">
<!--按钮-->
<view class="_header">
<view class='{{menuTapCurrent=="0"?"btn_selected":""}}' data-current="0" catchtap="menuTap">
<text>推荐线路</text>
</view>
<view class='{{menuTapCurrent=="1"?"btn_selected":""}}' data-current="1" catchtap="menuTap">
<text>收藏</text>
</view>
<view class='{{menuTapCurrent=="2"?"btn_selected":""}}' data-current="2" catchtap="menuTap">
<text>历史</text>
</view>
</view>
<!--内容，可以选择包一起，我是直接少包了一层-->
<view class="content" hidden="{{menuTapCurrent!='0'}}">
</view>
<view class="content" hidden="{{menuTapCurrent!='1'}}">
</view>
<view class="content" hidden="{{menuTapCurrent!='2'}}">
</view>
</view>
