小程序实现Tab选项卡（Tab切换）

1，wxml代码结构

<view class="rech-list">

    <view class="{{0 == currentIndex ? 'rech-ac' : 'rech-view'}}" bindtap="titleClick" data-idx="0">

      <text class="rech-text1">个人会员</text>

      <text class="rech-num">2000积分</text>

      <text class="rech-mon">￥200.00</text>

    </view>

    <view class="{{1 == currentIndex ? 'rech-ac' : 'rech-view'}}" bindtap="titleClick" data-idx="1">

      <text class="rech-text1">普通会员</text>

      <text class="rech-num">10000积分</text>

      <text class="rech-mon">￥1000.00</text>

    </view>

    <view class="{{2 == currentIndex ? 'rech-ac' : 'rech-view'}}" bindtap="titleClick" data-idx="2">

      <text class="rech-text1">高级会员</text>

      <text class="rech-num">11000积分*5</text>

      <text class="rech-mon">￥5000.00</text>

    </view>

    <view class="{{3 == currentIndex ? 'rech-ac' : 'rech-view'}}" bindtap="titleClick" data-idx="3">

      <text class="rech-text1">VIP</text>

      <text class="rech-num">12000积分*5</text>

      <text class="rech-mon">￥15000.00</text>

    </view>

    <view style="clear:both;"></view>

  </view>

2，js代码

data: {

    //选择默认充值金额的索引值

    currentIndex:1,

  },

  //等级切换选项卡js代码

  titleClick: function (e) {

    let currentPageIndex =

      this.setData({

        //拿到当前索引并动态改变

        currentIndex: e.currentTarget.dataset.idx

      })

  },