在微信小程序开发中,不能像普通web开发一样通过JS操作DOM,因此不能通过JSDOM操作直接为一个节点添加一个类。我们可以通过微信小程序数据绑定,再加上微信小程序中支持的三元判断表达式,去更改标签类名。
具体实现:以一个tab栏为例,在逻辑层定义一个数据activeClass,值为添加active类的索引。给每个tab中的view块绑定一个tabHandler事件,通过id属性向逻辑层传递点击的view块索引,对数据进行修改。
<view class="root">
<!-- tab栏是固定高度的 -->
<view class="tabs">
<view class="item {{ activeClass == 1 ? 'active':'' }}" id="1" bindtap="tabHandler">
<text>个性推荐</text>
</view>
<view class="item {{ activeClass == 2 ? 'active':'' }}" id="2" bindtap="tabHandler">
<text>歌单</text>
</view>
<view class="item {{ activeClass == 3 ? 'active':'' }}" id="3" bindtap="tabHandler">
<text>主播电台</text>
</view>
<view class="item {{ activeClass == 4 ? 'active':'' }}" id="4" bindtap="tabHandler">
<text>排行榜</text>
</view>
</view>
</view>
Page({
data: {
activeClass: 1,
},
tabHandler: function(e){
var index = e.currentTarget.id;
console.log(index)
this.setData({
activeClass :index
})
},
})