源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-07-23 17:30 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改字体颜色功能。分享给大家供大家参考,具体如下: 1、效果展示 [img]http://files.jb51.net/file_images/article/201712/2017125160449568.gif?201711516515[/img] [b]2、关键代码[/b] 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>
这里使用[code]bindtap="bindtap{{index}}"[/code]绑定事件动态修改[code]style="color:{{color}}"[/code]中的颜色值。 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)

[b]3、源代码[/b]点击此处[url=http://xiazai.jb51.net/201712/yuanma/wx-fontcolor-codes(jb51.net).rar][b]本站下载[/b][/url]。 希望本文所述对大家微信小程序开发有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部