微信小程序开发——动态改变按钮背景颜色-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发——动态改变按钮背景颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在wxss文件中可以简单地设置button的背景颜色和各种样式，然而，这样的样式设计不能够动态改变。那么，如何动态改变控件的样式呢？下面以button为例来介绍。

此方法不用修改wxss文件，首先，在js文件中定义一个初始化边变量并给他赋初始化值（比如color:'white'），此变量会在wxml文件中调用和修改值。

 data: {
    color1:'white'
  },

在wxml文件中，添加一个button控件，用style设置其样式：

<button bindtap="doing" style="width: 236rpx; height: 73rpx;background-color:{{color1}}"></button>

重要的是，在设置background-color时，用到了{{color1}}调用在js文件中定义的color1。

然后，在js文件中定义按钮的点击函数“doing”，

doing:function(){
    this.setData({color1:'red'})
  },

这样，在点击此按钮之后，按钮的背景色会一直显示‘red’。

类似的，此方法可以实现多个按钮之间，相互改变颜色。文章来源地址https://www.toymoban.com/news/detail-519089.html

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文件：

<button bindtap = "undo" style="width: 236rpx; height: 73rpx; background-color:{{color1}}"></button>
<button bindtap="doing" style="width: 236rpx; height: 73rpx; background-color:{{color2}}"></button>
<button bindtap="did" style="width: 236rpx; height: 73rpx; background-color:{{color3}}"></button>

到了这里，关于微信小程序开发——动态改变按钮背景颜色的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！