微信小程序如何动态增删class类名达到切换tabel栏的效果

微信小程序和vue还是有点差别的，要想实现通过动态切换class来达到切换css的效果，请看代码：

 //wxml页面：
　　<view class="tab">
      <view wx:for="{{catList}}" wx:key="index" bindtap="tabs" class="{{num==index?'active':''}}" data-index="{{index}}">
        {{item.name}}
      </view>
  　</view>
  　

  //wxss页面（给你的active加样式，active可以随便取，wxml和wxss里保持一致就行）：
  .tab .active{background-color: rgb( 231, 23, 23 );color:#fff;}
  　

  //js页面(num记得设置默认值 ，这样第一个view就带了你在wxss页面写的active的样式；)：　
    data:{

      num:0,

    }

  tabs:function(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
          num:index
    })

  }

 

 如果帮到了你，请不要吝啬你的赞哦~