一、案例需求

使用自定義組件的數據監聽實現：通過點擊下方三個按鈕，上方顏色變化（效果如下）

二、自定義組件代碼

自定義組件為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小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。