微信小程序学习第8天——自定义组件的数据监听器Observer小案例
2023-09-11 14:21:26 时间
一、案例需求
使用自定义组件的数据监听实现:通过点击下方三个按钮,上方颜色变化(效果如下)
二、自定义组件代码
自定义组件为test
test.wxml文件代码
<view class="bgccolor" style="background-color: rgb({{colorRGB}});">{{colorRGB}}</view>
<view class="sview">
<button class="rbtn" bindtap="addR" >R</button>
<button class="gbtn" type="primary" bindtap="addG">G</button>
<button class="bbtn" bindtap="addB">B</button>
</view>
test.wxss文件代码
.bgccolor {
height: 200rpx;
}
.rbtn {
width: 33.33% !important;
float:left;
font-weight: 100;
}
.gbtn {
width: 33.33% !important;
float:left;
}
.bbtn{
width: 33.33% !important;
float:left;
color: red;
}
test.js文件代码
Component({
data:{
rgb:{
r:0,
g:0,
b:0
},
colorRGB:'0,0,0'
},
methods:{
addR(){
this.setData({
'rgb.r':this.data.rgb.r +5>255?0:this.data.rgb.r +35
})
},
addG(){
this.setData({
'rgb.g':this.data.rgb.g +5>255?0:this.data.rgb.g +20
})
},
addB(){
this.setData({
'rgb.b':this.data.rgb.b +5>255?0:this.data.rgb.b +50
})
}
},
observers:{
'rgb.r,rgb.g,rgb.b':function(r,g,b){
this.setData({
colorRGB:`${r},${g},${b}`
})
}
}
})
三、页面代码
home.json中引入自定义组件test
{
"usingComponents": {
"my-test":"/components/test/test"
}
}
home.WXML文件中使用自定义组件
<my-test></my-test>
相关文章
- C#中的序列化和反序列化案例
- struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Action的实现类
- struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Jsp页面
- struts+hibernate+oracle+easyui实现lazyout组件的简单案例——OpSessionview实现
- struts+hibernate+oracle+easyui实现lazyout组件的简单案例——工具类
- JMS ActiveMQ案例
- VB.net:VB.net编程语言学习之基于VS软件利用VB.net语言实现对CAD/VRML进行二次开发的简介、案例应用之详细攻略
- CV之IS:计算机视觉之图像分割(Image Segmentation)/语义分割算法的简介、使用方法、案例应用之详细攻略
- CV之FR之MTCNN:基于TF框架利用MTCNN算法检测并对齐人脸图像进(人脸识别/人脸相似度)而得出人脸特征向量从而计算两张人脸图片距离案例应用之详细攻略
- Database之SQL:SQL在线编程、工作中常用SQL代码实践(以语法为导向的增、删、改、查,已基本涵盖所有语法案例)之详细攻略
- DL之Keras:基于Keras框架建立模型实现【预测】功能的简介、设计思路、案例分析、代码实现之详细攻略(经典,建议收藏)
- TF之RNN:实现利用scope.reuse_variables()告诉TF想重复利用RNN的参数的案例
- 实战案例,手把手教你用 Python 构建电商用户画像
- 实战案例!使用 Python 进行 RFM 客户价值分析!
- QT案例实战1 - 从零开始编写一个OCR工具软件 (2)QT下载及安装