一、案例需求

使用自定义组件的数据监听实现：通过点击下方三个按钮，上方颜色变化（效果如下）

二、自定义组件代码

自定义组件为test

test.wxml文件代码

<view class="bgccolor" style="background-color: rgb({{colorRGB}});">{{colorRGB}}</view>
<view class="sview"><button class="rbtn" bindtap="addR" >R</button><button class="gbtn" type="primary" bindtap="addG">G</button><button class="bbtn" bindtap="addB">B</button></view>

test.wxss文件代码

.bgccolor {height: 200rpx;
}.rbtn { width: 33.33% !important; float:left;font-weight: 100;}.gbtn { width: 33.33% !important;float:left;}.bbtn{width: 33.33% !important;float:left;color: red;}

test.js文件代码

Component({data:{rgb:{r:0,g:0,b:0},colorRGB:'0,0,0'},methods:{addR(){this.setData({'rgb.r':this.data.rgb.r +5>255?0:this.data.rgb.r +35})},addG(){this.setData({'rgb.g':this.data.rgb.g +5>255?0:this.data.rgb.g +20})},addB(){this.setData({'rgb.b':this.data.rgb.b +5>255?0:this.data.rgb.b +50})}},observers:{'rgb.r,rgb.g,rgb.b':function(r,g,b){this.setData({colorRGB:`${r},${g},${b}`})}}
})

三、页面代码

home.json中引入自定义组件test

{"usingComponents": {"my-test":"/components/test/test"}
}

home.WXML文件中使用自定义组件

<my-test></my-test>

微信小程序学习第8天——自定义组件的数据监听器Observer小案例相关推荐

微信小程序网悦新闻开发--自定义组件开发（六）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧首先我们在项目根目录建一个公共文件夹,这里我命名为components 在components里面创建一个组件, dt-horse-race-lamp > index 最后 ...
支付宝小程序填坑系列之自定义组件无法显示
最近换了台新机器,重装了支付宝小程序IDE,发布了一个新版本的支付宝小程序,于是奇异的事情发生了... 之前使用很正常的支付宝小程序,突然间无法登录了,于是一顿排查猛如虎... 最后发现是卡在了登录环 ...
小程序拖动滑块验证（自定义组件插件分享）
效果图: 文章目录: #1 创建组件 #2 组件编码 MoveVerify.wxss MoveVerify.wxml MoveVerify.js #3 页面引用在页面的 json 文件中引用组件在 ...
微信小程序（30）：自定义组件-slot
微信小程序首次进入引导提示自定义组件
实现效果展示实现步骤第一步(新建组件) 组件代码  <view class="guide" wx:if="{{showGuid ...
微信小程序学习笔记(四)自定义组件
文章目录 1. 组件的创建与引用 1.1 创建组件 1.2 引用组件 1.3 全局引用 VS 局部引用 1.4 组件和页面的区别 2. 样式 2.1 组件样式隔离 2.2 修改组件的样式隔离选项 3. ...
微信小程序学习笔记（四）——自定义组件
自定义组件组件的创建与引用创建组件在根目录下创建 components 文件夹右键点击 components 文件夹,选择新建 Component,就会自动生成.wxml..wxss..js. ...

微信小程序学习第8天——自定义组件的数据监听器Observer小案例

一、案例需求

二、自定义组件代码

test.wxml文件代码

test.wxss文件代码

test.js文件代码

三、页面代码

home.json中引入自定义组件test

home.WXML文件中使用自定义组件

微信小程序学习第8天——自定义组件的数据监听器Observer小案例相关推荐

最新文章

热门文章