一、案例需求
使用自定义组件的数据监听实现:通过点击下方三个按钮,上方颜色变化(效果如下)
二、自定义组件代码
自定义组件为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>