小程序切换效果

wxml

<view class="satuan">
  <view class="sadan" bindtap="xin" style="border-color:{{xin}};">新人团</view>
  <view class="sadan" bindtap="pu" style="border-color:{{pu}};">普通团</view>
  <view class="sadan" bindtap="chao" style="border-color:{{chao}};">超级团</view>
</view>

wxss

.satuan{
  height:100rpx;
  width:100%;
  background:#F32C39;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:space-around;
}
.satuan .sadan{
  height:100rpx;
  line-height:100rpx;
  font-size:30rpx;
  color:#fff;
  border-bottom:4rpx solid #fff;
}

wxjs

  data: {
    xin: "#fff",
    pu: "#F32C39",
    chao:"#F32C39"
  },  
xin:function(){
    this.setData({
      xin: "#fff",
      pu: "#F32C39",
      chao: "#F32C39"
    })
  },
  pu:function(){
    this.setData({
      xin: "#F32C39",
      pu: "#fff",
      chao: "#F32C39"
    })
  },
  chao:function(){
    this.setData({
      xin: "#F32C39",
      pu: "#F32C39",
      chao: "#fff"
    })
  },