当前位置：首页 > 资讯 > 技术文档

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

时间：2021-11-14 18:23 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能。分享给大家供大家参考，具体如下： [b]1、效果展示[/b] [img]http://files.jb51.net/file_images/article/201712/2017126104303615.gif?2017116104315[/img] [b]2、操作步骤：[/b] ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 [b]3、关键代码[/b] 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的奇偶数，进而实现设置[code]style="background:{{viewBg}};color:white;height:100px;"[/code]中viewBg背景色值在绿色与蓝色之间切换的效果。 [b]4、源代码[/b]点击此处[url=http://xiazai.jb51.net/201712/yuanma/wx-view-bgcolor-codes(jb51.net).rar][b]本站下载[/b][/url]。希望本文所述对大家微信小程序开发有所帮助。

全部评论(0)

上一篇：微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
下一篇：微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

资讯排行榜
更多>>