微信小程序如何动态增删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

    })

  }