小程序处复杂数据动画抖动问题

Question

如下代码，使用css的translate属性和js监测手势实现图片的移动和缩放，当数据是数组的时候，在真机上会出现抖动，模拟器上正常，请各位大佬们支支招啊

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代码

//前面  根据手势处理偏移量和缩放
//最后更新数据
let showDogs = this.data.showDogs;
showDogs[id].partTouchData = partTouchData;

this.setData({
    showDogs: showDogs
  })

Answer 1

原来这个原因：

/**
   * 触摸小配件中
   */
  partTouchMove: function (e) {
    //获取当前小配件的partTouchData
    //let partTouchData = e.currentTarget.dataset.item.partTouchData;
    //获取当前小配件的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-绑定了复杂数据，不断循环获取的时候，会严重影响性能。