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

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);
   } 
  }
})
相关推荐
文心快码BaiduComate4 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序