微信小程序和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 }) }
如果帮到了你,请不要吝啬你的赞哦~