一组件 .js

Component({

/**

* 组件的初始数据

*/

data: {

_rgb: { // rgb 的颜色值对象

r: 0,

g: 0,

b: 0

},

fullColor: '0, 0, 0' // 根据 rgb 对象的三个属性，动态计算 fullColor 的值

},

/**

* 组件的方法列表

*/

methods: {

changeR() { // 修改 rgb 对象上 r 属性的值

this.setData({

'_rgb.r': this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5

})

},

changeG() { // 修改 rgb 对象上 g 属性的值

this.setData({

'_rgb.g': this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5

})

},

changeB() { // 修改 rgb 对象上 b 属性的值

this.setData({

'_rgb.b': this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5

})

},

_randomColor() {

this.setData({

_rgb: {

r: Math.floor(Math.random() * 256),

g: Math.floor(Math.random() * 256),

b: Math.floor(Math.random() * 256)

}

})

}

},

// 监听对象中指定属性的变化

observers: {

'_rgb.**': function (obj) { // 监听 rgb 对象上 r、g、b 三个子属性的变化如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化

this.setData({ // 为 data 中的 fullColor 重新赋值

fullColor: `${obj.r}, ${obj.g}, ${obj.b}`

})

}

}

})

二 .wxml 结构

<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值：{{fullColor}}</view>

<button size="mini" type="default" bindtap="changeR">R</button>

<button size="mini" type="primary" bindtap="changeG">G</button>

<button size="mini" type="warn" bindtap="changeB">B</button>

三 .wxss 样式

.colorBox {

line-height: 200rpx;

font-size: 24rpx;

color: white;

text-shadow: 0rpx 0rpx 2rpx black;

text-align: center;

}

四测试效果

微信小程序数据监听器小案例相关推荐

使用proxy替代setData实现小程序数据代理
小程序数据代理微信开发工具导入项目新建项目 -> 导入src文件 -> 预览效果代码 proxy.js const nativePage = Pageconst nativeCom ...
微信公众号与小程序数据互通
背景最近做了一个有意思的功能<官网内容订阅>,用户在官网扫码后可以订阅官网栏目,订阅栏目后发送模版消息提醒用户订阅成功,模版消息关联了小程序,然后做了一个小程序来管理用户订阅的栏目,小程 ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序数据渲染和数据请求
微信开放文档数据渲染概念:微信小程序和Vue实现理念是一致的,是基于数据驱动完成页面数据的自动化渲染.微信小程序中数据和Vue一样是响应式,即数据的更改会驱动页面进行数据的刷新. 具体操作首先找 ...
通过思维导图带你回顾微信公开课和微信小程序数据
[回复"1024",送你一个特别推送] 本来这篇文章应该是在前天微信公开课当天写的,但是最近实在太忙了,就一直拖到了现在.张小龙作为一个技术转型产品经理最成功的案例,其实有很多地方 ...
[微信小程序]知识总结及案例汇总
#目录主要从以下几个方面给大家总结一下微信小程序相关的知识! ####1 前言 ####2.什么是小程序? ####3.微信小程序在微信开发中的位置? ####4.微信小程序框架–MINA #### ...
Charles抓取微信小程序数据以及其它应用网站数据
为了抓取小程序数据所以使用Charles来抓取,下面介绍下使用方法(mac环境下使用).使用Charles可以非常方便的抓取Http/Https请求.官方dmg下载地址:点击此处下载 Charles抓 ...
微信小程序数据拼接_微信小程序用户数据解密算法Java版
打开官方文档,开心~ 腾讯爸爸竟然给提供了解密算法然而我下载解压后人傻了可能鹅厂没养Java程序猿吧那就看这C++改造吧 public class AnthCodeVerify { privat ...
微信小程序数据统计和错误统计的实现
某些情况下我们需要对小程序某些用户的行为进行数据进行统计,比如统计某个页面的UV, PV等,统计某个功能的使用情况等.好让产品对于产品的整个功能有所了解. 在网页里,我们很多人都用过谷歌统计,小程序里 ...

微信小程序数据监听器小案例

一组件 .js

二 .wxml 结构

三 .wxss 样式

四测试效果

微信小程序数据监听器小案例相关推荐

最新文章

热门文章

微信小程序数据监听器小案例

一 组件 .js

二 .wxml 结构

三 .wxss 样式

四 测试效果

微信小程序数据监听器小案例相关推荐

最新文章

热门文章

一组件 .js

四测试效果