-
微信小程序数据监听器小案例
一 组件 .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 结构
颜色值：{{fullColor}} 三 .wxss 样式
.colorBox {
line-height: 200rpx;
font-size: 24rpx;
color: white;
text-shadow: 0rpx 0rpx 2rpx black;
text-align: center;
}
四 测试效果
-
相关阅读:
mysql数据库的管理
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
信创办公–基于WPS的EXCEL最佳实践系列 （条件格式）
高性能面试八股文之编译流程&程序调度
无线充U型超声波电动牙刷方案开发
测试工具（四）Jenkins环境搭建与使用
Linux学习记录——일 基本指令（1）
【Java-----IO流（七）之标准输出流详解】
NLP之Bert实现文本多分类
6.python-opencv人脸检测
- 原文地址：https://blog.csdn.net/chengqiuming/article/details/126787143