RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
创新互联百度小程序教程：数据监听器
  • 数据监听器
    • 使用数据监听器
    • 监听字段语法
      • Bugs & Tips

    数据监听器

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

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

    使用数据监听器

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

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

    代码示例

    在开发者工具中预览效果

    • JS
     
 
 
      
  
  
  
    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最多触发每个监听器一次。

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

    代码示例

    • JS
     
 
 
      
  
  
  
    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.

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

    • JS
     
 
 
      
  
  
  
    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。

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

    Bugs & Tips

    • 数据监听器监听的是setData中涉及的数据字段，并且只有这些字段发生改变时才会触发，类似observer;
    • 在数据监听器中再次进行setData设置被监听的字段，可能会造成循环监听，请注意使用；
    • 由于小程序对setData进行了优化操作，所以如果同步的多次设置setData那么实际上只会执行最后一次setData引起的observers。

    代码示例

    • JS
     
 
 
      
  
  
  
    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://www.jxjierui.cn/article/dhpegpp.html

    其他资讯

    快速导航
    友情链接
    网站建设
    联系方式
    • 企业：青羊区浩晨众云设计工作室（个体工商户）
    • 地址：成都市青羊区太升南路288号
    • 电话：18980820575
    • 网址：www.jxjierui.cn

    公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575

    网站备案号：蜀ICP备2025119795号-2

    内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 成都做网站