微信小程序学习第8天——自定义组件的数据监听器Observer小案例

一、案例需求

使用自定义组件的数据监听实现：通过点击下方三个按钮，上方颜色变化（效果如下）

二、自定义组件代码

自定义组件为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>