小程序中自定义组件的数据监听器

NewBoy
1,236 阅读2分钟

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作，它的作用类似于 vue 中的 watch 侦听器

在小程序组件中，数据监听器基本语法格式如下：

Component({

  observers: {
    '字段A, 字段B': function(字段A的新值, 字段B的新值) {
        //逻辑处理
    }
  }
})

数据监听器的基本用法

实现一个简单的效果

Snip20220205_3.png

分别有n1、n2 俩个数值，这俩个数值相加会得到 sum 这个数值，通过点击 n1自增 和点击 n2自增 来改变 sum 的值，那么计算这个sum的值就可以根据这个数据监听器实现

组件页面结构

<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1" class="btn1">n1自增</button>
<button bindtap="addN2" class="btn2">n2自增</button>

组件数据结构

Component({

  data: {
    n1:0,
    n2:0,
    sum:0
  },
    
  methods: {

    addN1(){
        this.setData({
            n1 : this.data.n1 +1
        })
    },

    addN2(){
        this.setData({
            n2 : this.data.n2 +1
        })
    }
  },

  //数据监听
  observers: {

    //监听n1 和 n2 的数值变化
    'n1, n2': function(newN1, newN2) {
      this.setData({
        sum: newN1 + newN2
      })
    }
  }
  
})

数据监听器监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化

Component({

  observers: {
    '对象.属性A, 对象.属性B': function(属性A的新值, 属性B的新值) {
        
        //触发这个监听器的三种情况：
        //为属性A赋值，使用 setData 设置 this.data.对象.属性A 时触发
        //为属性B赋值，使用 setData 设置 this.data.对象.属性B 时触发
        //直接为对象赋值，使用 setData 设置 this.data.对象 时触发
        
        //处理逻辑
    }
  }
})

数据监听器监听对象属性的基本用法

实现一个简单的效果

Snip20220205_4.png

通过点击界面上R、G、B的三个按钮，来控制视图颜色的变化

  • 步骤1. 渲染UI结构

    • 组件页面结构

      <view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值:{{fullColor}}</view>
<button bindtap="changeR" type="default">R</button>
<button bindtap="changeG" type="primary">G</button>
<button bindtap="changeB" type="warn">B</button>

    • 组件页面样式

      .colorBox {
    line-height: 200rpx;
    font-size: 24rpx;
    color: white;
    text-shadow: 0rpx 0rpx 2rpx black;
    text-align: center;
}

  • 步骤2：定义button 的事件处理函数

    Component({
    data: {
        
        //data定义一个对象rgb，对象有三个属性，分别为R、G、B，
        rgb: {
            r:0,
            g:0,
            b:0
        },
        //定义一个颜色值 fullColor 字符串，最后根据对象的R、G、B属性动态生成一个字符串并赋给fullColor，从而改变视图的颜色
        fullColor: "0,0,0"
    },

    methods: {
        changeR(){
            this.setData({
                //修改 rgb 对象上 r 属性的值
                "rgb.r": this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
            })
        },
       
       changeG(){
            this.setData(g
                //修改 rgb 对象上 g 属性的值
                "rgb.g": this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
            })
        },

        changeB(){
            this.setData({
                //修改 rgb 对象上 b 属性的值
                "rgb.b": this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
            })
        },
    },
})

  • 步骤3：监听对象中指定属性的变化

    Component({
    //其他代码（同上） 
    
    observers: {
        "rgb.r, rgb.g, rgb.b" : function (r, g, b) {
        
            this.setData({
                fullColor: `${r}, ${g}, ${b}`
            })
        }
    }
})

数据监听器中所有属性的变化

如果某个对象中需要被监听的属性特别多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化

使用通配符 **，上述效果中关于属性的监听可以改为

Component({

    //其他代码（同上） 
        
    observers: {
        
        //使用通配符 `**`监听对象上所有的属性值的变化
        "rgb.**" : function (obj) {
            
            this.setData({
                fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
            })
        }
    }
})
avatar
文章
阅读
粉丝