首页 > 编程 > JavaScript > 正文

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

2019-11-19 14:47:16
字体:
来源:转载
供稿:网友

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

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、源代码点击此处本站下载

希望本文所述对大家微信小程序开发有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表