鍍金池/ 問答/C  動(dòng)漫  HTML/ 小程序處復(fù)雜數(shù)據(jù)動(dòng)畫抖動(dòng)問題

小程序處復(fù)雜數(shù)據(jù)動(dòng)畫抖動(dòng)問題

如下代碼，使用css的translate屬性和js監(jiān)測手勢實(shí)現(xiàn)圖片的移動(dòng)和縮放，當(dāng)數(shù)據(jù)是數(shù)組的時(shí)候，在真機(jī)上會(huì)出現(xiàn)抖動(dòng)，模擬器上正常，請(qǐng)各位大佬們支支招啊

wxml代碼

<view wx:for='{{showDogs}}' wx:if='{{item.display}}' style='transform: translate({{item.partTouchData.translateX}}px, {{item.partTouchData.translateY}}px) scale({{item.partTouchData.scale}});' class='{{item.borderClass}}'>

js代碼

//前面  根據(jù)手勢處理偏移量和縮放
//最后更新數(shù)據(jù)
let showDogs = this.data.showDogs;
showDogs[id].partTouchData = partTouchData;

this.setData({
    showDogs: showDogs
  })
回答
編輯回答
小曖昧

原來這個(gè)原因：

/**
   * 觸摸小配件中
   */
  partTouchMove: function (e) {
    //獲取當(dāng)前小配件的partTouchData
    //let partTouchData = e.currentTarget.dataset.item.partTouchData;
    //獲取當(dāng)前小配件的id
    let id = e.currentTarget.dataset.item.id;
    let partTouchData = this.data.showDogs[id].partTouchData

把

let partTouchData = e.currentTarget.dataset.item.partTouchData;

改為

let partTouchData = this.data.showDogs[id].partTouchData

完美解決！??！

可能是通過data-綁定了復(fù)雜數(shù)據(jù)，不斷循環(huán)獲取的時(shí)候，會(huì)嚴(yán)重影響性能。

2018年1月20日 22:23