微信小程序如何简单实现tab切换效果

Js部分
Page({
   data:{
     index:0//这是初始的下标为0
   },
   tab(e){
   //获取wxml所点的下标位置 
    console.log(e.currentTarget.dataset.index);
    this.setData(把获取到的下标重新赋值给index
    //
      index:e.currentTarget.dataset.index
    })
  },
})

wxml部分

<view class="tab">
    <view bindtap="tab" data-index="{{0}}" class="{{index==0?'activeindex active':'activeindex'}}">
      关注
    </view>
    <view bindtap="tab" data-index="{{1}}" class="{{index==1?'activeindex active':'activeindex'}}">
      喜欢
    </view>
    <view bindtap="tab" data-index="{{2}}" class="{{index==2?'activeindex active':'activeindex'}}">
      精选
    </view>
  </view>
  //这是所要切换的内容
 <view class="tablist">
    <view wx:if="{{index==0}}">
      1
    </view>
    <view wx:if="{{index==1}}">
      2
    </view>
    <view wx:if="{{index==2}}">
      3
    </view>
  </view>

wxss部分

.tab{
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
}
.activeindex{
  width: 30%;
  height: 50px;
  margin-left: 3%;
  text-align: center;
}
.active{
  color: red;
  border-bottom: 2px solid red;
}