微信小程序數(shù)據(jù)監(jiān)聽器使用實例詳解
一、數(shù)據(jù)監(jiān)聽器
1.1 什么是數(shù)據(jù)監(jiān)聽器
數(shù)據(jù)監(jiān)聽器用于 監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作 。它的作用類似于 vue 中
的 watch 偵聽器。在小程序組件中，
在componets中新建一個test2文件夾在文件夾里新建component
在app.json usingComponents中 添加組件目錄：
數(shù)據(jù)監(jiān)聽器的基本語法格式如下：
1.2 數(shù)據(jù)監(jiān)聽器的基本用法
"usingComponents": {
"my-test1":"/components/test/test",
"my-test2":"/components/test2/test2",
},
Component({
observers:{
'字段A,字段B': function(字段A的新值,字段B的新值)
//do something
}
})
組件的 .js 文件
<!--components/test2/test2.wxml-->
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>
// components/test2/test2.js
Component({
/**
* 組件的初始數(shù)據(jù)
*/
data: {
n1:0,
n2:0,
sum:
},
/**
* 組件的方法列表
*/
methods: {
addN1(){
this.setData({
n1:this.data.n1 + 1
})
},
addN2() {
this.setData({
n2:this.data.n2 + 1
})
}
},
// 數(shù)據(jù)監(jiān)聽節(jié)點
observers:{
'n1,n2':function(new1,new2){ //監(jiān)聽 n1 和 n2數(shù)據(jù)的變化
this.setData({ // 通過監(jiān)聽器，自動計算sum的值
sum: new1 + new
})
}
}
})
1.3 監(jiān)聽對象屬性的變化
數(shù)據(jù)監(jiān)聽器支持監(jiān)聽對象中 單個 或 多個屬性 的變化，示例語法如下：
二、數(shù)據(jù)監(jiān)聽器
在componets中新建一個test3文件夾在文件夾里新建component
在app.json usingComponents中 添加組件目錄：
Compoent({
observers:{
'對象.屬性A，對象.屬性B'：function(屬性A的新值，屬性B的新值){
// 觸發(fā)此監(jiān)聽器的 3 種情況
// [為屬性A賦值]使用 setData 設(shè)置this.data.對象.屬性A 時觸發(fā)
// [為屬性B賦值] 使用setData 設(shè)置 this.data.對象.屬性B 時觸發(fā)
// [直接為對象賦值] 使用setData 設(shè)置this.data對象 時觸發(fā)
// do something
}
}
})
.wxml 結(jié)構(gòu) .wxss 樣式
"usingComponents": {
"my-test1":"/components/test/test",
"my-test2":"/components/test2/test2",
"my-test3":"/components/test3/test3"
}
// components/test3/test3.js
Component({
/**
* 組件的初始數(shù)據(jù)
*/
data: {
rgb:{ // rgb 的顏色值對象
r:0,
g:0,
b:
},
fullColor: '0, 0, 0' //根據(jù)rgb對象的三個屬性，動態(tài)計算fullColor 的值
},
})
<!--components/test3/test3.wxml-->
<view style="background-color:rgb({{fullColor}});"class="colorBox">顏色值：
{{fullColor}}</view>
<button size="mini" type="default" bindtap="changeR">R</button>
<button size="mini" type="primary" bindtap="changeG">G</button>
<button size="mini" type="warn" bindtap="changeB">B</button>
<view>{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>
/* components/test3/test3.wxss */
.colorBox {
line-height: 200rpx;
font-size:24rpx;
color:white;
text-shadow:0rpx 0rpx 2rpx black;
text-align:center;
}
2.1 監(jiān)聽對象中指定屬性的變化
// components/test3/test3.js
Component({
/**
* 組件的方法列表
*/
methods: {
changeR(){ //修改 rgb 對象上 r屬性的值
this.setData({
'rgb.r':this.data.rgb.r + 5 > 255? 255 : this.data.rgb.r +
5
})
},
changeG(){ // 修改rgb對象上r屬性的值
this.setData({
'rgb.g':this.data.rgb.g + 5 >255 ?255 :this.data.rgb.g +
})
},
changeB(){//修改 rgb對象上b屬性的值
this.setData({
'rgb.b':this.data.rgb.b + 5 > 255? 255 :this.data.rgb.b +
})
}
}
})
2.2 監(jiān)聽對象中所有屬性的變化
如果某個對象中需要被監(jiān)聽的屬性太多，為了方便，可以使用 通配符 ** 來 監(jiān)聽 對象 中所有屬性的變化，代碼結(jié)構(gòu)如下
observers:{
// 監(jiān)聽rgb 對象上 r,g,b 三個屬性的變化
'rgb.r,rgb.g, rgb.b':function(r,g,b){
this.setData({
//為data中的fullColor 重新賦值
fullColor:`${r},${g},$`
})
}
}
observers:{
// 監(jiān)聽rgb 對象上 所有屬性的變化
'rgb.**':function(obj){
this.setData({
fullColor:`${obj.r},${obj.g},${obj.b}`
})
}
}
三、純數(shù)據(jù)字段
3.1 什么是純數(shù)據(jù)字段
概念： 純數(shù)據(jù)字段 指的是那些 不用于界面渲染的 data 字段。
應(yīng)用場景：例如有些情況下，某些 data 中的字段 既不會展示在界面上，也不會傳遞給其他組件 ，僅僅在當(dāng)前組件內(nèi)部使用。帶有這種特性的 data 字段適合被設(shè)置為純數(shù)據(jù)字段。
優(yōu)點：純數(shù)據(jù)字段 有助于提升頁面更新的性能。
3.2 使用規(guī)則
在 Component 構(gòu)造器的 options 節(jié)點中，指定 pureDataPattern 為一個 正則表達(dá)式 ，字段名符合這個正則表達(dá)式的字段將成為純數(shù)據(jù)字段，示例代碼如下：
3.3 使用純數(shù)據(jù)字段改造數(shù)據(jù)監(jiān)聽器
Component({
options: {
// 指定所有 _ 開頭的數(shù)據(jù)字段為純數(shù)據(jù)字段
pureDataPattern:/^_/
},
data: {
a:true, // 普通數(shù)據(jù)字段
_b:true, // 純數(shù)據(jù)字段
}
}
})
// components/test3/test3.js
Component({
options:{
// 指定所有_ 開頭的數(shù)據(jù)字段為純數(shù)據(jù)字段
pureDataPattern:/^_/
}
到此這篇關(guān)于微信小程序數(shù)據(jù)監(jiān)聽器使用實例詳解的文章就介紹到這了,更多相關(guān)小程序數(shù)據(jù)監(jiān)聽器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好，需要工程師自己去實現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧，對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12
這篇文章主要為大家詳細(xì)介紹了js彈出窗口的簡單實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Jjcarousellite 實現(xiàn)圖片列表滾動的簡單實例
這篇文章主要介紹了Jjcarousellite 實現(xiàn)圖片列表滾動的簡單實例，有需要的朋友可以參考一下2013-11-11
離開當(dāng)前頁面前使用js判斷條件提示是否要離開頁面
這篇文章主要介紹了離開當(dāng)前頁面前如何使用js判斷條件提示是否要離開頁面,需要的朋友可以參考下2014-05-05
文章介紹了如何使用scrollIntoViewIfNeeded方法將元素滾動到可見區(qū)域,以及如何通過配置對象控制滾動行為,還提供了一個純JavaScript的解決方案,可以實現(xiàn)類似的功能2024-12-12
這篇文章主要介紹了JS document對象簡單用法,結(jié)合完整實例形式詳細(xì)分析了JS document對象獲取、輸出、節(jié)點調(diào)用等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了微信小程序中實現(xiàn)輪播圖效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
幾種設(shè)置表單元素中文本輸入框不可編輯的方法總結(jié)
這篇文章主要是對幾種設(shè)置表單元素中文本輸入框不可編輯的方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章介紹了js 3種歸并操作的實例代碼，有需要的朋友可以參考一下2013-10-10