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

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



一、数据监听器 - 案例

  前面已经介绍自定义组件 - 数据监听器,通过栗子学习了数据监听器的用法,以及监听对象中单个属性。接下来就通过一个案例来更深刻了解该数据监听器的用法吧。话不多说,让我们原文再续,书接上回吧。


1、案例效果

  可以先来看一下要实现的效果图,图中有显示颜色和三个按钮,通过三个按钮可以控制颜色的变化,如下所示:

  首先先来创建一个新的组件 test3。

  在把该组件设置为全局引用。

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

2、渲染 UI 结构

  自定义组件创建并引用之后,接下来就是将该组件渲染到页面上,并进行样式美化,具体代码如下所示:

message.wxml

  在消息页面使用该组件。

<view>---------</view>
<my-test3></my-test3>

test3.wxml

  view 组件的背景颜色需要动态绑定。

<text>components/test3/test3.wxml</text>
<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值:{{fullColor}}</view>
<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="cahngeB" type="warn">B</button>
<view>{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>

test3.wxss

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

  可以来看一下美化后的效果:

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

  接下来就是给这三个按钮绑定事件,并更改对应的颜色值,具体代码如下:

test3.js

  当颜色值累加到 255 时,在加的话就会归0。

Component({
  /**
   * 组件的初始数据
   */
  data: {
    rgb: {
      r: 0, 
      g: 0, 
      b: 0
    },
    // 根据 rgb 对象的三个属性,动态计算 fullColor 的值
    fullColor: '0, 0, 0' 
  },
  /**
   * 组件的方法列表
   */
  methods: {
    addN1 (){
      this.setData({num1 : this.data.num1 + 1});
    },
    addN2 (){
      this.setData({num2 : this.data.num2 + 1});
    },
  },
})

   通过 view 渲染出 rgb 这三个值,可以看一下显示效果:

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

   从上面的结果,可以发现点击按钮只会改变 rgb 这个三个值,并不会主动改变 fullColor 的值,所以需要为这三个值添加数据监听,具体代码如下所示:

test3.js

   监听 rgb 对象上r,g,b 三个属性的变化。

Component({
  observers: {
    // 监听 rgb 对象上r,g,b 三个属性的变化
    'rgb.r, rgb.g, rgb.b': function (r, g, b){
      this.setData({
        // 为 data 中的 fullColor 重新赋值
        fullColor: `${r},${g},${b}`
      })
    }
  },
})

   此时,当点击按钮改变 rgb 这三个值时,就触发数据监听器重新给 fullColor 赋值,从改变 view 的颜色,可以来看一下运行效果:

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

   在实际开发过程中,对象的属性都比较多,如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符 ** 来监听对象中所有属性的变化,具体代码如下:

test3.js

  使用通配符 ** 监听对象上的所有属性的变化。

Component({
  observers: {
    // 使用通配符 ** 监听对象上的所有属性的变化
    'rgb.**' : function (obj) {
      this.setData({
        fullColor: `${obj.r},${obj.g},${obj.b}`
      })
    }
  },
})

  此时就完成整个案例,可以发现监听对象所以属性也能改变组件的背景颜色,来看一下运行效果:


总结

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

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

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

相关文章
|
17天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
17天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
9天前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
25 3
|
1月前
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会,提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架,前后端分离架构,集成微信支付等服务,确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布,后期注重数据监控、用户反馈和运营推广,以持续优化用户体验。
|
1月前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
|
2月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
70 1
微信小程序:轻松实现时间轴组件
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
641 1
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
81 0
微信小程序:自定义关注公众号组件样式
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
76 1
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
248 1