微信小程序怎么实现点击按钮修改字体颜色功能-创新互联

这篇文章给大家分享的是有关微信小程序怎么实现点击按钮修改字体颜色功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

十余年建站经验， 网站制作、成都网站设计客户的见证与正确选择。创新互联提供完善的营销型网页建站明细报价表。后期开发更加便捷高效，我们致力于追求更美、更快、更规范。

微信小程序实现点击按钮修改字体颜色功能，具体如下：

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)

感谢各位的阅读！关于“微信小程序怎么实现点击按钮修改字体颜色功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

标题名称：微信小程序怎么实现点击按钮修改字体颜色功能-创新互联
分享链接：https://www.cdcxhl.com/article6/djchog.html

成都网站建设公司_创新互联，为您提供面包屑导航、定制网站、服务器托管、网站建设、网站制作、网站收录

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联