微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】


Posted in Javascript onDecember 06, 2017

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

1、效果展示

微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

2、操作步骤:

① 数据绑定view样式背景属性值
② 通过逻辑文件设置该背景属性初始值
③ 通过点击按钮修改背景属性值

3、关键代码

index.wxml文件:

<view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view>
<button type="default" bindtap="changeBg">点击我修改view标签的背景颜色</button>

index.js文件:

var num=0;
Page({
  data:{
    viewBg:'green'
  },
  changeBg(){
    num++;
    var result=num/2;
    if(num%2==0){      
      this.setData({
        viewBg:'green'
      })
    }else{
      this.setData({
        viewBg:'blue'
      })
    }
    console.log(num)
    console.log(result)
  }
})

代码中通过设置num递增数,再针对每次的事件响应进行取余运算判定num的奇偶数,进而实现设置style="background:{{viewBg}};color:white;height:100px;"中viewBg背景色值在绿色与蓝色之间切换的效果。

4、源代码点击此处本站下载

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

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
JavaScript手机振动API
Jun 11 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
vue cli使用绝对路径引用图片问题的解决
Dec 06 #Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 #Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 #Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 #Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 #Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 #Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 #Javascript
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
了解重排与重绘
2019/05/29 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
DataFrame中去除指定列为空的行方法
2018/04/08 Python
对Python函数设计规范详解
2019/07/19 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python文件及目录操作代码汇总
2020/07/08 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
如何客观的进行自我评价
2013/12/17 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
安全大检查反思材料
2014/01/31 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
社区工作感言
2014/02/21 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
通知范文怎么写
2015/04/16 职场文书
员工开除通知书
2015/04/25 职场文书
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技