uu 方式一:采用三目运算数据绑定方式改变样式
<!--page.vxml-->
<view class="middle">
<view class="{{isChecked?'oldClass':'newClass'}}" bindtap="changeClass">快点击我,翻脸给你看</view>
</view>
//page.js
Page({
data: {
// 一开始,我们将isChecked设为true,通过isChecked?'oldClass':'newClass'得知,未点击时效果为oldClass
isChecked: true
},
// 当点击以后, 由true变为false,通过isChecked?'oldClass':'newClass'得知,点击以后的效果为newClass
changeClass: function(){
this.setData({
isChecked: false
})
}
})
方式二:直接在class上绑定样式名称
<!--vxml-->
<view class="middle">
<view class="{{isChecked}}" bindtap="changeClass">快点击我,翻脸给你看</view>
</view>
//page.js
Page({
data: {
//默认oldClass样式,当点击时,将newClass 赋值给isChecked
isChecked:"oldClass"
},
changeClass: function(){
this.setData({
isChecked:"newClass"
})
}
})
方式三:
当想要在原样式上新增样式,或者覆盖样式,也可以直接这样样式绑定;
<!--page.vxml-->
<view class="middle">
<view class="oldClass {{isChecked}}" bindtap="changeClass">快点击我,翻脸给你看</view>
</view>
//page.js
Page({
data: {
//默认oldClass样式,当点击时,将newClass赋值给 isChecked 即新旧样式叠加
isChecked:''
},
changeClass: function(){
this.setData({
isChecked:'newClass'
})
}
})
方式四:
对于改变控件样式,我们还可以把样式直接写在style中,通过三目运算方式;但此方式对后期维护不太友好,建议不推荐使用;例如:
<!--page.vxml-->
<view class="middle">
<view class="class" style="{{isChecked?'color:red':'color:green'}}" bindtap="changeClass">快点击我,翻脸给你看</view>
</view>
//page.js
Page({
data: {
isChecked:true
},
changeClass: function(){
this.setData({
isChecked:false
})
}
})
❤如果文章对您有所帮助,就在文章的右上角或者文章的末尾点个赞吧!(づ ̄ 3 ̄)づ
❤如果喜欢大白兔分享的文章,就给大白兔点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号:708072830】
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)。