×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：数据监听器

数据监听器

数据监听器可以用于监听和响应任何属性和数据字段的变化。数据监听器自小程序基础库版本 3.105.9 开始支持。

我们提供的服务有：网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、枣庄ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的枣庄网站制作公司

使用数据监听器

有时，需要组合监听一些数据字段。

例如，this.data.sum永远是 this.data.numberA与this.data.numberB的和。此时，可以使用数据监听器进行如下实现。

代码示例

在开发者工具中预览效果

 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  properties: {
    3.   
  
  
  3.  numberA: {
    4.   
  
  
  4.  type: Number,
    5.   
  
  
  5.  value: 0
    6.   
  
  
  6.  },
    7.   
  
  
  7.  numberB: {
    8.   
  
  
  8.  type: Number,
    9.   
  
  
  9.  value: 0
    10.   
  
  
  10.  }
    11.   
  
  
  11.  },
    12.   
  
  
  12.  attached: function() {
    13.   
  
  
  13.  this.setData({
    14.   
  
  
  14.  numberA: 1,
    15.   
  
  
  15.  numberB: 2
    16.   
  
  
  16.  })
    17.   
  
  
  17.  },
    18.   
  
  
  18.  observers: {
    19.   
  
  
  19.  'numberA, numberB': function (numberA, numberB) {
    20.   
  
  
  20.  // 在 numberA 或者 numberB 被设置时，执行这个函数
    21.   
  
  
  21.  this.setData({
    22.   
  
  
  22.  sum: numberA + numberB
    23.   
  
  
  23.  })
    24.   
  
  
  24.  }
    25.   
  
  
  25.  }
    26.   
  
  
  26. });
    27.

监听字段语法

数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次setData最多触发每个监听器一次。

同时，监听器可以监听子数据字段，如下例所示。

代码示例

 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  observers: {
    3.   
  
  
  3.  'some.subfield': function(subfield) {
    4.   
  
  
  4.  // 使用 setData 设置 this.data.some.subfield 时触发
    5.   
  
  
  5.  // （除此以外，使用 setData 设置 this.data.some 也会触发）
    6.   
  
  
  6.  subfield === this.data.some.subfield
    7.   
  
  
  7.  },
    8.   
  
  
  8.  'arr[12]': function(arr12) {
    9.   
  
  
  9.  // 使用 setData 设置 this.data.arr[12] 时触发
    10.   
  
  
  10.  // （除此以外，使用 setData 设置 this.data.arr 也会触发）
    11.   
  
  
  11.  arr12 === this.data.arr[12]
    12.   
  
  
  12.  },
    13.   
  
  
  13.  }
    14.   
  
  
  14. });
    15.

如果需要监听所有子数据字段的变化，可以使用通配符**。

 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  observers: {
    3.   
  
  
  3.  'some.field.**': function(field) {
    4.   
  
  
  4.  // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
    5.   
  
  
  5.  // （除此以外，使用 setData 设置 this.data.some 也会触发）
    6.   
  
  
  6.  field === this.data.some.field
    7.   
  
  
  7.  },
    8.   
  
  
  8.  },
    9.   
  
  
  9.  data: {
    10.   
  
  
  10.  some: {
    11.   
  
  
  11.  field: {
    12.   
  
  
  12.  subfield: [1, 2, 3]
    13.   
  
  
  13.  }
    14.   
  
  
  14.  }
    15.   
  
  
  15.  },
    16.   
  
  
  16.  attached: function() {
    17.   
  
  
  17.  // 会触发 observers
    18.   
  
  
  18.  this.setData({
    19.   
  
  
  19.  'some.field': {}
    20.   
  
  
  20.  });
    21.   
  
  
    22.   
  
  
  22.  // 会触发 observers
    23.   
  
  
  23.  // this.setData({
    24.   
  
  
  24.  // 'some.field.xxx': {}
    25.   
  
  
  25.  // });
    26.   
  
  
    27.   
  
  
  27.  // 会触发 observers
    28.   
  
  
  28.  // this.setData({
    29.   
  
  
  29.  // 'some': {}
    30.   
  
  
  30.  // });
    31.   
  
  
  31.  }
    32.   
  
  
  32. });
    33.

特别地，仅使用通配符**可以监听全部setData。

 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  observers: {
    3.   
  
  
  3.  '**': function(value) {
    4.   
  
  
  4.  // 数据发生变化即触发，这里的 value 是 properties 和 data 的合集
    5.   
  
  
  5.  }
    6.   
  
  
  6.  }
    7.   
  
  
  7. })
    8.

Bugs & Tips

代码示例

 
 
 
    
  
  
  
  1. Component({
    2.   
  
  
  2.  properties: {
    3.   
  
  
  3.  numberA: {
    4.   
  
  
  4.  type: Number,
    5.   
  
  
  5.  value: 0
    6.   
  
  
  6.  },
    7.   
  
  
  7.  numberB: {
    8.   
  
  
  8.  type: Number,
    9.   
  
  
  9.  value: 0
    10.   
  
  
  10.  }
    11.   
  
  
  11.  },
    12.   
  
  
  12.  attached: function() {
    13.   
  
  
  13.  this.setData({
    14.   
  
  
  14.  numberA: 1,
    15.   
  
  
  15.  numberB: 2
    16.   
  
  
  16.  });
    17.   
  
  
  17.  this.setData({
    18.   
  
  
  18.  numberA: 2,
    19.   
  
  
  19.  numberB: 3
    20.   
  
  
  20.  })
    21.   
  
  
  21.  },
    22.   
  
  
  22.  observers: {
    23.   
  
  
  23.  'numberA, numberB': function (numberA, numberB) {
    24.   
  
  
  24.  // 在 numberA 或者 numberB 被设置时，执行这个函数
    25.   
  
  
  25.  this.setData({
    26.   
  
  
  26.  sum: numberA + numberB
    27.   
  
  
  27.  })
    28.   
  
  
  28.  }
    29.   
  
  
  29.  }
    30.   
  
  
  30. });
    31.

以上只会执行一次observers。


新闻标题：创新互联百度小程序教程：数据监听器
转载注明：http://cdbrznjsb.com/article/dhpegpp.html

其他资讯

让你的专属顾问为你服务