微信小程序双重tab栏切换

<view class="tab">
  <view class="tab-title">
    <view class="{{selected1?'border-tottom':'default'}}" bindtap="selected1">标题1</view>
    <view class="{{selected2?'border-tottom':'default'}}" bindtap="selected2">标题2</view>
  </view>
  <view class="tab-content">
    <view class="{{selected1?'show':'hidden'}}">
                                <view class="tab">
                                  <view class="tab-title">
                                    <view class="{{selected3?'border-tottom':'default'}}" bindtap="selected3">标题1</view>
                                    <view class="{{selected4?'border-tottom':'default'}}" bindtap="selected4">标题2</view>
                                  </view>
                                  <view class="tab-content">
                                    <view class="{{selected3?'show':'hidden'}}">内容1</view>
                                    <view class="{{selected4?'show':'hidden'}}">内容2</view>
                                  </view>
                                </view>
    </view>
    <view class="{{selected2?'show':'hidden'}}">内容2</view>
  </view>
</view>

.tab-title{
  width:100%;
  height:50rpx;
  line-height:50rpx;
  display:flex;
  flex-direction: row;
}
.tab-title view{
  flex:auto;
  text-align:center;
}
.border-tottom{
  border-bottom:1rpx solid red;
}
.show{display:block;}
.hidden{display:none;}

Page({
  data: {
    selected1: true,
    selected2: false,
    selected3:true,
    selected4:false
  },
  selected1: function (e) {
    this.setData({
      selected1: true,
      selected2: false
    })
  },
  selected2: function (e) {
    this.setData({
      selected2: true,
      selected1: false
    })
  },
  selected3: function (e) {
    this.setData({
      selected4: false,
      selected3: true
    })
  },
  selected4:function(e){
    this.setData({
      selected4: true,
      selected3: false
    })
  }
})

 

转载于:https://my.oschina.net/u/3512111/blog/1094083