微信小程序开发——动态改变按钮背景颜色
在wxss文件中可以简单地设置button的背景颜色和各种样式,然而,这样的样式设计不能够动态改变。那么,如何动态改变控件的样式呢?下面以button为例来介绍。
此方法不用修改wxss文件,首先,在js文件中定义一个初始化边变量并给他赋初始化值(比如color:'white'),此变量会在wxml文件中调用和修改值。
data: { color1:'white' },
在wxml文件中,添加一个button控件,用style设置其样式:
重要的是,在设置background-color时,用到了{{color1}}调用在js文件中定义的color1。
然后,在js文件中定义按钮的点击函数“doing”,
doing:function(){ this.setData({color1:'red'}) },
这样,在点击此按钮之后,按钮的背景色会一直显示‘red’。
类似的,此方法可以实现多个按钮之间,相互改变颜色。
js文件:
data: { color1:'white', color2:'white', color3:'white' },undo:function(){ this.setData({color1:'red',color2:'white',color3:'white'}) }, doing:function(){ this.setData({color1:'white',color2:'red',color3:'white'}) }, did:function(){ this.setData({color1:'white',color2:'white',color3:'red'}) }
wxml文件:
与50位技术专家面对面
20年技术见证,附赠技术全景图妊娠纹产品大全