微信小程序做一个tab卡

首先是wxml文件

<view class="tabCon">
            <view class="tab1" bindtap="tab1Click">tab1</view>
            <view class="tab2" bindtap="tab2Click">tab2</view>
            <view class="tab3" bindtap="tab3Click">tab3</view>
            <view class="border"></view>
            <view class="{{tab==='1'?'active1':tab==='2'?'active2':tab==='3'?'active3':'active1'}}"></view>
</view>
<view>选项卡内容</view>

下面是css文件

 .tabCon {
  margin: 0 10rpx;
  height: 40px;
  position: relative;
}
.tabCon .tab1{ 
  display: inline-block;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  height: 30px;
  width: 100px;
  line-height: 30px;
  text-align: center;
}
 .tabCon .tab2 {
  display: inline-block;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-align: center;
}
 .tabCon .tab3 {
  display: inline-block;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-align: center;
}
 .tabCon .border {
  width: 100%;
  height: 1px;
  position: absolute;
  top: 30px;
  left: 0;
  background-color: #ccc;
}
 .tabCon .active1 {
  width: 102px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 30px;
  left: 0;
}
 .tabCon .active2 {
  width: 100px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 30px;
  left: 102px;
}
 .tabCon .active3 {
  width: 100px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 30px;
  left: 202px;
}

下面是js的核心部分：

  tab1Click() {
    this.setData({tab:'1'});
  },
  tab2Click() {
    this.setData({tab:'2'});
  },
tab3Click() {
    this.setData({tab:'3'});
  }