微信小程序选项卡

wxml文件中：

<view class="menu_box"><text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text><text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text></view><view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view><view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>

js文件中：

menuTap:function(e){var current=e.currentTarget.dataset.current;//获取到绑定的数据//改变menuTapCurrent的值为当前选中的menu所绑定的数据this.setData({menuTapCurrent:current});},

wxss文件中：

.menu_box{display: flex;height: 80rpx;}.menu1,.menu2{flex: 1;font-size:30rpx;line-height: 80rpx;text-align: center;}.borders{border-bottom: 4rpx solid #f00;color: #f00;}.tab1,.tab2{height: 300rpx;background: #23bff3;}.tab2{background: #ccc;}