小程序实现tab切换

今天我们来看一下如何使用小程序实现tab切换。
思路：
1、点击菜单栏的时候，被点击的菜单标题改变样式
2、点击菜单标题出现相应的菜单内容
这是大致思路，我们首先看一下第一步，有一个菜单栏并且点击菜单改变样式。在index.wtml中写入如下代码：

<view class="header_tab">
	<text class="{{isSelect==0 ? 'select' : ''}}" data-select="0" bindtap="tabChange">菜单1</text>
	<text class="{{isSelect==1 ? 'select' : ''}}" data-select="1" bindtap="tabChange">菜单2</text>
</view>

.header_tab text{
  font-size: 26rpx;
  margin: 0 40rpx;
  line-height: 85rpx;
  color: #7c7c7c;
}
.header_tab .select{
  color:#ea5260;
}

点击菜单标题改变样式

data: {
  isSelect: 0
},
tabChange:function(event){
  this.setData({
      isSelect: event.target.dataset.select
  })
}

然后点击菜单标题出现相应的菜单内容

<!-- tab切换的内容 -->
  <view>
    <!-- 菜单1内容 -->
    <view class="{{isSelect==0 ? 'show' : 'hide'}}">菜单1内容</view>
    <!-- 菜单2内容 -->
    <view class="{{isSelect==1 ? 'show' : 'hide'}}">菜单1内容</view>
  </view>

.hide{
  display: none;
}
.content .show{
  display: block;
}

ok，这就是一个简单的tab切换~