微信小程序实现点击按钮修改字体颜色功能【附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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
vue组件父子间通信详解(三)
Nov 07 Javascript
vue 项目常用加载器及配置详解
Jan 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中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
Python下Fabric的简单部署方法
2015/07/14 Python
《Python学习手册》学习总结
2018/01/17 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
升职自荐信范文
2013/10/05 职场文书
心理健康教育制度
2014/01/27 职场文书
小学生考试获奖感言
2014/01/30 职场文书
记账会计岗位职责
2014/06/16 职场文书
小学综合实践活动总结
2014/07/07 职场文书
党建目标管理责任书
2014/07/25 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
Jsonp劫持学习
2021/04/01 PHP
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang