本文实例讲述了微信小程序实现点击按钮修改字体颜色功能。分享给大家供大家参考,具体如下:
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)