微信小程序点击添加类以改变样式怎么固定默认第一项有添加

Question

需要作出这样的效果：

这个用jquery我很熟练做出来，但不知道用小程序js如何实现，烦请大神们帮帮忙，指点指点~
我的代码是这样的：

<view class='stateTitle {{Index==index?"coupActive":""}}' bindtap='unusedTap'wx:for='{{headTitle}}'wx:key='index'data-index='{{index}}' >
    {{item}}
  </view>

data: {
    headTitle:["未使用","已使用","已过期"],
    unuesd:true,
  },
  unusedTap: function (event){
    var that = this;
    that.setData({
       Index: event.currentTarget.dataset.index 
    })
  },

可以实现点击选择的效果，但是最初默认第一项添加颜色和下划线样式的没有，请问怎么做呢？

Answer 1

这个效果其实很好实现，我贴部分代码。布局上可以随意添加栏目，只需要把data-current依次排序即可
布局：

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="switchNav">选项一</view>
  <view class="swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="switchNav">选项二</view>
</view>

js：

currentTab: 0,//tab默认为0，也就是默认第一项
//点击切换tab
  switchNav: function (res) {
    var _this = this;
    if (this.data.currentTab === res.target.dataset.current) {
      return false;
    } else {
      _this.setData({
        currentTab: res.target.dataset.current
      });
    }
  },

wxss：

.swiper-tab {
  width: 100%;
  position: relative;
  text-align: center;
  line-height: 80rpx;
  z-index: 9;
  background-color: #74c947;
}

.swiper-tab-list {
  font-size: 36rpx;
  display: inline-block;
  width: 50%;
  color: #fff;
}

.on {
  border-bottom: 4rpx #fff solid;
  color: #fff;
}