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


Posted in Javascript onDecember 05, 2017

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

1、效果展示

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

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

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

Javascript 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
微信小程序实现animation动画
Jan 26 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 #Javascript
vue+iview写个弹框的示例代码
Dec 05 #Javascript
Node.js创建Web、TCP服务器
Dec 05 #Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 #Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
最实用的JS数组函数整理
Dec 05 #Javascript
You might like
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
10款实用的PHP开源工具
2015/10/23 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
js 函数性能比较方法
2020/08/24 Javascript
详解vue v-model
2020/08/31 Javascript
python复制与引用用法分析
2015/04/08 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python datetime包函数简单介绍
2019/08/28 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
项目资料员岗位职责
2013/12/10 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
校本培训个人总结
2015/02/28 职场文书
人事聘任通知
2015/04/21 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python