【微信小程序】自定义组件

【微信小程序】自定义组件 - 数据监听器

news2024/9/22 17:28:32

1. 什么是数据监听器

在这里插入图片描述

2. 数据监听器的基本用法

组件的 UI 结构如下：
在这里插入图片描述
组件的 .js 文件代码如下：

3. 监听对象属性的变化

在这里插入图片描述

数据监听器 - 案例

案例效果

2. 渲染 UI 结构

在这里插入图片描述

3. 定义 button 的事件处理函数

在这里插入图片描述

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

在这里插入图片描述

5. 监听对象中所有属性的变化

在这里插入图片描述

我的代码

<!--components/rgb/rgb.wxml-->
<!-- <view class="colorBox" style="background-color:rgb({{rgb.r}},{{rgb.g}},{{rgb.b}})">{{rgb.r}},{{rgb.g}},{{rgb.b}}</view> -->
<view class="colorBox" style="background-color:rgb({{fullColor}})">{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>
<button size="mini" bindtap="changR">R</button>
<button size="mini" bindtap="changG">G</button>
<button size="mini" bindtap="changB">B</button>

// components/rgb/rgb.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changR(){
      this.setData({
        'rgb.r':this.data.rgb.r<255?this.data.rgb.r+5:255
      })
    },
    changG(){
      this.setData({
        'rgb.g':this.data.rgb.g<255?this.data.rgb.g+5:255
      })
    },
    changB(){
      this.setData({
        'rgb.b':this.data.rgb.b<255?this.data.rgb.b+5:255
      })
    },
  },
  observers:{
   'rgb.**':function(newRgb){
    this.setData({
      fullColor:`${newRgb.r},${newRgb.g},${newRgb.b}`
    })
    console.log(this.data.fullColor);
   } 
  }
})