微信小程序怎么实现点击按钮修改字体颜色

本篇内容介绍了“微信小程序怎么实现点击按钮修改字体颜色”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1、效果展示

2、关键代码

index.wxml文件

<view class="view" >我是view标签</view>
<view >  
  <block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color">
    <button class="btn"  type="default" bindtap="bindtap{{index}}"></button>
  </block>
</view>

这里使用bindtap="bindtap{{index}}"绑定事件动态修改中的颜色值。

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)

“微信小程序怎么实现点击按钮修改字体颜色”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！