微信小程序选项卡的实现

骨架

<view class="tab" >
    <text class="txt {{currentNavtab==index?'active':''}}" bindtap="switchTab" wx:for="{{navTab}}" wx:key="index" data-index="{{index}}">{{item}}</text>      // data-index  绑定下标
</view>

样式

.tab{
    height: 86rpx;
    display: flex;
    align-items: center;
}
.txt{
    width: 25%;
    text-align: center;
}
.active{
    color: red;
    font-size: 30rpx;
    font-weight: 600;
}

功能

data: {
        navTab:["综合","新品","销量","价格"],
        currentNavtab:"0"

    },
    switchTab(e){
        // console.log(e.currentTarget.dataset.index)
      this.setData({currentNavtab:e.currentTarget.dataset.index})
    },