微信小程序实现点击按钮修改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 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
用js编写留言板
Mar 17 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
jQuery实现朋友圈查看图片
Sep 11 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
解析thinkphp的左右值无限分类
2013/06/20 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
django配置app中的静态文件步骤
2020/03/27 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
法学研究生自我鉴定范文
2013/12/04 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
爽歪歪广告词
2014/03/20 职场文书
家属慰问信
2015/02/14 职场文书
慰问信格式规范
2015/03/23 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
安全生产会议制度
2015/08/06 职场文书
六年级数学教学反思
2016/02/16 职场文书
民事纠纷协议书
2016/03/23 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python