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

请添加图片描述

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘

您的点赞、关注、收藏、评论,是对我最大的激励和支持!!!🤩 🤩 🤩

在这里插入图片描述


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第34篇文章;
  今天开始学习微信小程序的第18天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏,【源代码下载地址】


一、数据监听器

  前面已经学习自定义组件 - 数据、方法和属性,通过栗子了解到自定义组件中 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 累加时,是不会触发数据监听的,可以来看一下运行效果:

在这里插入图片描述


总结

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

在这里插入图片描述

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

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

更多专栏订阅:



订阅更多,你们将会看到更多的优质内容!!

  • 10
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
微信小程序的原生 picker-view 是一种可以进行滚动选择的组件。它可以在小程序中展示一个滚动的选择器,用户可以通过上下滑动来选择需要的选项。 使用 picker-view 的步骤如下: 1. 在 wxml 文件中,通过<picker-view>标签来定义一个 picker-view 组件,可以通过style属性来设置它的样式。 2. 在 js 文件中,首先需要通过页面的setData()方法来初始化 picker-view 组件的数据源,使用数组的形式来表示选项。 3. 在 wxml 文件中,通过<picker-view-column>标签来定义 picker-view 中的每一列。可以使用wx:for属性来循环渲染每一列的选项。 4. 在 js 文件中,可以通过 onLoad()或者onShow()等生命周期方法来初始化 picker-view 组件的选中项。可以通过setData()方法更新 selected 属性的值来改变选中项。 5. 在 wxml 文件中,通过<view>标签来定义一个按钮或者其他交互元素,通过bindtap属性来绑定事件处理函数。 6. 在 js 文件中,实现事件处理函数,并通过setData()方法更新 selected 值以改变选中项。 7. 可以通过onPickerChange()等事件来监听 picker-view 的选中项改变的事件,并实现相应的逻辑。 需要注意的是,picker-view 组件的数组类型数据源,每一项都需要有value和text两个属性,分别表示选项的值和显示文本。 通过以上步骤,就可以在微信小程序中使用原生 picker-view 组件实现选择器的功能。用户可以滚动选择选项,并通过自定义的事件处理函数来获取选中项的值。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是夜阑的狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值