【微信小程序】-- 自定义组件 - 数据监听器 (三十四)

简介: 【微信小程序】-- 自定义组件 - 数据监听器 (三十四)



一、数据监听器

  前面已经学习自定义组件 - 数据、方法和属性,通过栗子了解到自定义组件中 data 属性 和 methods 方法的使用,以及 data 和 properties 的区别。接下来就来讲解一下另外一个自定义组件 - 数据监听器。话不多说,让我们原文再续,书接上回吧。

1、什么是数据监听器

  数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下:

Component({
  observers: {
    'n1, n2': function(n1, n2){
      this.setData({sum: n1 + n2})
    }
  },
})

  其中 n1,n2 为监听字段,形参n1,n2也是前面字段的新值。

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

  了解到数据监听语法之后,通过下面的栗子来学习一下,首先对组件进行全局引用,具体代码如下所示:

app.json

{
  "usingComponents":{
    "my-test1": "/components/test1/test1",
    "my-test2": "/components/test2/test2"
  },
}

test2.wxml

  组件的 UI 结构如下:

<text>components/test2/test2.wxml</text>
<view>{{num1}} + {{num2}} = {{sum}}</view>
<button size="mini" bindtap="addN1">num1+1</button>
<button size="mini" bindtap="addN2">num2+1</button>

test2.js

  组件的 .js 文件,监听多个字段用逗号隔开即可。

Component({
  /**
   * 组件的初始数据
   */
  data: {
    num1: 0,
    num2: 0,
    sum: 0,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    addN1 (){
      this.setData({num1 : this.data.num1 + 1});
    },
    addN2 (){
      this.setData({num2 : this.data.num2 + 1});
    },
  },
  observers: {
    // 监听 num1 和 num2 数据的变化
    'num1, num2': function(newnum1, newnum2){
      // 通过监听器自动计算 sum 的值
      this.setData({sum: newnum1 + newnum2});
    }
  },
})

message.wxml

  使用 my-test2 组件。

<my-test2></my-test2>

  此时当点击按钮让属性 num1 或者 num2 自加时,就会触发数据监听器,从而计算出 sum 的值,可以来看一下运行效果:

3、监听对象属性的变化

  前面只对单个数据进行了监听,此外数据监听器还支持监听对象中单个或多个属性的变化,基本语法格式如下:

Component({
  observers: {
    // 监听 r 、 g 和 b 数据的变化
    'rgb.r, rgb.g, rgb': function(r, g, b){
      this.setData({
        fullColor: `${r},${g},${b}` // 注意:这里反引号
      });
    }
  },
})

  其中,触发该监听器有三种情况:

  • 使用 setData 设置 this.data.rgb.r 时触发。
  • 使用 setData 设置 this.data.rgb.g 时触发。
  • 直接为对象赋值,使用 setData 设置 this.data.rgb 时触发。

  下面通过一个栗子来了解一下,具体代码如下所示:

test2.wxml

<view>--------------------</view>
<view>rgb颜色值: {{rgb.r}} {{rgb.g}} {{rgb.b}}</view>
<button size="mini" bindtap="rN1">R+1</button>
<button size="mini" bindtap="gN1">G+1</button>
<button size="mini" bindtap="bN1">B+1</button>

test2.js

  组件的 .js 文件,监听多个字段用逗号隔开即可。

Component({
  /**
   * 组件的初始数据
   */
  data: {
    rgb: {
      r: 0, 
      g: 0, 
      b: 0
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    rN1 (){
      this.setData({'rgb.r': this.data.rgb.r + 1});
    },
    gN1 (){
      this.setData({'rgb.g': this.data.rgb.g + 1});
    },
    bN1 (){
      this.setData({'rgb.b': this.data.rgb.b + 1});
    }
  },
  observers: {
    'rgb.r, rgb.g': function(r, g){
      this.setData({
        // fullColor: `${r},${g},${b}`
        sum: r + g
      });
    }
  },
})

  当点击按钮让 r 和 g 进行累加时,就会触发数据监听,从而更新 sum 值。而点击让 b 累加时,是不会触发数据监听的,可以来看一下运行效果:


总结

  感谢观看,这里就是自定义组件 - 数据监听器的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
3月前
|
JSON 安全 定位技术
微信附近人提取v3脚本, 微信附近人id提取技术插件,采集附近人wxid数据工具
本内容介绍微信“附近的人”功能的技术原理与实现方法,基于LBS服务,涉及位置模拟、协议分析及数据解析。通过修改GPS坐标或使用Frida等工具hook位置函数
|
7月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
7月前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
9月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
9月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
11月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
419 1
微信小程序:轻松实现时间轴组件
|
11月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
1940 1
|
11月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
501 0
微信小程序:自定义关注公众号组件样式
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
459 12
|
8月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
294 0

热门文章

最新文章