微信小程序实现点击按钮修改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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
原生js二级联动效果
Jun 20 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 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笔记之常用文件操作
2010/10/12 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php统计文章排行示例
2014/03/04 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP模块化安装教程
2016/06/01 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
angular.bind使用心得
2015/10/26 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
IT工程师岗位职责
2014/07/04 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
HTML基础详解(上)
2021/10/16 HTML / CSS