微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

微信⼩程序实现点击按钮修改字体颜⾊功能【附demo源
码下载】
本⽂实例讲述了微信⼩程序实现点击按钮修改字体颜⾊功能。

分享给⼤家供⼤家参考，具体如下：
1、效果展⽰
2、关键代码
index.wxml⽂件
<view class="view" style="color:{{color}}">我是view标签</view>
<view style="display:flex;">
<block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color">
<button class="btn" style="background:{{Color}};" type="default" bindtap="bindtap{{index}}"></button>
</block>
</view>
这⾥使⽤bindtap="bindtap{{index}}"绑定事件动态修改style="color:{{color}}"中的颜⾊值。

index.js⽂件
var pageData={}
pageData.data={
color:'black',
colorArray:['red','blue','yellow','green','black']
}
for(var i=0;i<5;++i){
(function(index){
pageData['bindtap'+index]=function(e){
this.setData({
color:this.data.colorArray[index]
})
}
})(i)
}
Page(pageData)
3、源代码点击此处。

希望本⽂所述对⼤家微信⼩程序开发有所帮助。