tab栏切换 小程序

html

<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'}}">内容1</view>
      <view class="{{selected2?'show':'hidden'}}">内容2</view>
  </view>
</view>

js

.tab-title{
  color: #111111;
  height:80rpx;
  line-height:80rpx;
  display:flex;
  justify-content: space-around;
  background-color: #fff;
  font-size: 32rpx;
  margin: 0rpx 20rpx 0rpx 20rpx;
}
.tab-title view{
  text-align:center;
}
.tab-title .default {
  width: 200rpx;
}
.border-tottom{
  border-bottom:1rpx solid #49A7FF;
  color: #49A7FF;
  width: 200rpx;
}
.tab-content {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin: 0rpx 20rpx 20rpx 20rpx;
}
.show{display:block;}
.hidden{display:none;}

css

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