【微信小程序】自定义组件 - 数据监听器

1. 什么是数据监听器


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

组件的 UI 结构如下:

组件的 .js 文件代码如下:

3. 监听对象属性的变化


数据监听器 - 案例

  1. 案例效果

2. 渲染 UI 结构

3. 定义 button 的事件处理函数

4. 监听对象中指定属性的变化

5. 监听对象中所有属性的变化


我的代码

ruby 复制代码
<!--components/rgb/rgb.wxml-->
<!-- <view class="colorBox" style="background-color:rgb({{rgb.r}},{{rgb.g}},{{rgb.b}})">{{rgb.r}},{{rgb.g}},{{rgb.b}}</view> -->
<view class="colorBox" style="background-color:rgb({{fullColor}})">{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>
<button size="mini" bindtap="changR">R</button>
<button size="mini" bindtap="changG">G</button>
<button size="mini" bindtap="changB">B</button>
ruby 复制代码
// components/rgb/rgb.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changR(){
      this.setData({
        'rgb.r':this.data.rgb.r<255?this.data.rgb.r+5:255
      })
    },
    changG(){
      this.setData({
        'rgb.g':this.data.rgb.g<255?this.data.rgb.g+5:255
      })
    },
    changB(){
      this.setData({
        'rgb.b':this.data.rgb.b<255?this.data.rgb.b+5:255
      })
    },
  },
  observers:{
   'rgb.**':function(newRgb){
    this.setData({
      fullColor:`${newRgb.r},${newRgb.g},${newRgb.b}`
    })
    console.log(this.data.fullColor);
   } 
  }
})
相关推荐
说私域21 分钟前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java12 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域13 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86813 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650214 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦21 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app