[微信小程式]this.setData , that.setData , this.data.val三者之間的區別和作用
阿新 • • 發佈:2019-02-12
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。
微信小程式開發交流qq群 173683895 、 526474645 ;
正文:
1.this.setData({ })
<view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top" style="{{translate}}">
this.setData({ translate: 'transform: translateX(' + this.data.windowWidth * 0.7 +'px);background-color: rgb(0, 68, 97);' })
上面的例子,通過this.setData改變了view的style屬性,並且會同步改變檢視
2.this.data.val
<view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top" style="{{translate}}">
this.data.translate = 'transform: translateX(0px)'
同樣的資料繫結,通過 this.data.translate改變了data中的translate的值,此時資料變了,但是檢視並不會變,這就導致了資料和檢視不一致的問題 。可使用3中的示例1或者示例2酌情解決此問題。
3.that.setData({ }) 這裡看兩個示例的不同結果進行對比
示例一: 示例一為錯誤示例 , 會出現 this.setData is not a function 的報錯,原因是此時的this物件指的是setTimeout 裡面的匿名函式物件 , 但是在這種情況下還是想動態渲染檢視,就需要把當前的this的狀態儲存起來,然後在 setTimeout 裡面的匿名函式物件內呼叫。如示例二
onLoad:function(){ setTimeout(function () { this.setData({ open: 111 },1000) }) },
示例二:儲存當前物件的this狀態,在 setTimeout 裡面的匿名函式物件內呼叫 , 此時能夠做到動態選擇檢視同時資料和檢視都不會出錯
onLoad:function(){
var that= this;
setTimeout(function () {
that.setData({
open: 111
},1000)
})
},
示例二: