微信小程序实现点击按钮修改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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
详解js访问对象的属性和方法
Oct 25 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
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
php时间不正确的解决方法
2008/04/09 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
Javascript中replace()小结
2015/09/30 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python卸载模块的方法汇总
2016/06/07 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
厂长助理岗位职责
2013/12/27 职场文书
怎样写演讲稿
2014/01/04 职场文书
社区工作者演讲稿
2014/05/23 职场文书
标准版离职证明书
2014/09/12 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
python解决12306登录验证码的实现
2021/04/18 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android