小程序缩放

双指缩放，基本原理就是监听touchstart 和 touchmove,start事件开始如果有两个触点就记录其距离，
然后再move事件中以此为基准，计算距离的变化，正就放大，负就缩小，。我这里是直接操作css的scale,
参考了这篇文章；但是结果有点奇怪，一开始是只能缩不能放，解决之后 每次缩放都会回到初始值。
后来发现这其实是同一个问题， 调用setData()居然只更新了视图，从this.data里读取的值还是初始值。
可能是调用太频繁，出现了一些意外
我发现这个情况之后就想直接赋值和setdata都写上this.setData({scale: 3}) this.data.scale = 3 ;
改了之后发现嗯，效果很魔幻，反正不太好；
于是把逻辑层的数据和视图的数据分开

this.setData({scale: 3})
scaleData.scale = 3 ;

let scaleData = {
  scale: 1,
  distance: 0
}

//page（）

touchMove(e){
    if (e.touches.length !== 2) return ;
    let distance = this.distance(e.touches[0], e.touches[1]);
    console.log(scaleData.distance,'开始move');
    let distanceDiff = distance -  scaleData.distance ;
    let newScale = distanceDiff * 0.002  + scaleData.scale ;
    console.log(scaleData.scale,'data');
    if (newScale > 3){
      this.setData({scale: 3})
      scaleData.scale = 3 ;
    } else if (newScale < 1){
      this.setData({scale:1})
      scaleData.scale = 1 ;
    }else {
      this.setData({scale:newScale}) ;
      scaleData.scale = newScale ;
    }
    console.log(newScale,distance,distanceDiff,'move');
  },

  touchStart(e){
    if (e.touches.length!== 2) return ;
    let distance = this.distance(e.touches[0], e.touches[1]);
    scaleData.distance = distance ;
    // this.setData({distance})
    console.log(distance,'start');
  },
  // 计算距离
  distance(p1,p2){
    let xMove = p2.clientX - p1.clientX ; 
    let yMove = p2.clientY - p1.clientY ; 
    return Math.sqrt(xMove * xMove + yMove* yMove);
  },```
最后的效果就比较正常了