微信小程序实现点击按钮修改字体颜色功能【附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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 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 stream_get_meta_data返回值
2013/09/29 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php cli配置文件问题分析
2015/10/15 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
药学职务聘任书
2014/03/29 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
家属答谢词
2015/01/05 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
仙境之桥观后感
2015/06/16 职场文书
中学生运动会广播稿
2015/08/19 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python