微信小程序中如果通过JS修改CSS样式

直接上代码了😃

WXML:

1
2
3
4
5
<view class="categories">
<view class="mid">
<view class="{{ bookSelected ? 'selected' : 'default' }}" bindtap="selectBook">书籍</view>
</view>
</view>

JS:

1
2
3
4
5
6
7
8
9
10
Page({
data: {
bookSelected: false,
},
selectBook: function() {
if (this.data.bookSelected != true){
this.data.bookSelected = true;
}
}
})

很明显,我是想通过修改bookSelected的值来改变CSS样式,true为selected的样式,false则default的样式,但是不是这样改变bookSelected的值,正确的方式如下:

1
2
3
4
5
6
7
selectBook: function(){
if (this.data.bookSelected != true){
this.setData({
bookSelected: true,
})
}
}

需要通过this.setData()方法来修改Pagedata中的属性值

hsowan wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!