微信小程序实现点击按钮修改字体颜色功能【附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的一些注意
Dec 06 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
JavaScript 乱码问题
2009/08/06 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
js实现抽奖的两种方法
2020/03/19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
2015年圣诞节寄语
2015/08/17 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书