监听对象中属性变化（一个或多个属性、全部属性）

最新推荐文章于 2024-03-03 07:45:00 发布

白小水i

最新推荐文章于 2024-03-03 07:45:00 发布

阅读量1k

点赞数

文章标签：微信小程序笔记前端

本文链接：https://blog.csdn.net/m0_62508027/article/details/132789266

版权

一、数据监听器

什么是数据监听器
数据监听器用于监听和响应任何属性和数据自动的变化，从而执行特定的操作。它的作用类似于vue中的watch侦听器。在小程序中，基本语法格式如下：

Component({
  observers: {
    '字段A，字段B': function(字段A的新值，字段B的新值){

    }
  }
})

数据监听器的基本用法

<view>n1 的值：{{n1}}</view>
<view>n2 的值：{{n2}}</view>
<view>sum 的值：{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1">点我 n1 + 1</button>
<button  bindtap="addN2">点我 n2 + 1</button>

// components/test2/test2.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    sum: 0,
    n1: 0,
    n2: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    addN1() {
      this.setData({
        n1: this.data.n1 + 1
      });
    },
    addN2() {
      this.setData({
        n2: this.data.n2 + 1
      })
    }
  },
  // 数据监听器
  observers: {
    'n1, n2': function(n1, n2) {
      this.setData({
        sum: n1 + n2
      })
    }
  }
})

监听对象属性的变化：支持监听对象中单个或多个属性的变化，语法如下：

Component({
  observers: {
    '对象.属性A， 对象.属性B': function(属性A的新值，属性B的新值) {
      // 触发此监听器的3种情况：
      // 为属性A赋值：使用setData设置 this.data.对象.属性A 时触发
      // 为属性B赋值：使用setData设置 this.data.对象.属性B 时触发
      // 直接为对象赋值：使用setData设置 this.data.对象 时触发
    }
  }
})

监听对象中所有属性的变化
如果某个对象中需要被监听的属性太多，可以使用通配符**来监听对象中所有属性的变化，示例代码如下：

observers: {
  'rgb.**': function(obj) {
    this.setData({
      fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
    })
  } 
}

二、案例

案例实现效果：当点击页面中RGB任意一个按钮，对应的值发生变化，页面上面显示的值变化并且view组件的背景颜色发生变化。
代码

WXML文件

<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值为：{{fullColor}}</view>
<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="changeB" type="warn">B</button>
<view>rgb的值：{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>

WXSS文件

.colorBox {
  color: #fff;
  line-height: 200rpx;
  text-align: center;
  text-shadow: 1rpx 1rpx 2rpx black;
}

JS文件

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

  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    changeR() {
      this.setData({
        'rgb.r': this.data.rgb.r + 5 >= 255 ? 255 : this.data.rgb.r + 5
      })
    },
    changeG() {
      this.setData({
        'rgb.g': this.data.rgb.g + 5 >= 255 ? 255 : this.data.rgb.g + 5
      })
    },
    changeB() {
      this.setData({
        'rgb.b': this.data.rgb.b + 5 >= 255 ? 255 : this.data.rgb.b + 5
      })
    }
  },

  observers: {
  	// 监听对象中的一个、或多个属性
    // 'rgb.r,rgb.g,rgb.b': function(r,b,g){
    //   this.setData({
    //     fullColor: `${r},${g},${b}`
    //   })
    // }
    // 监听对象中的全部属性
    'rgb.**': function(obj) {
      this.setData({
        fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
      })
    } 
  }
})