一波乾貨

.wxml

<!--scale.wxml-->
<view class="container">
  <view class="tip">
    <text>scroll-view子元素縮放</text>
    <text>說明：雙指縮放開發工具上並不支援，需要在真機上進行。 </text>
  </view>

  <scroll-view class="img" bindtouchstart="touchstartCallback"  bindtouchmove="touchmoveCallback" bindtouchend="touchendCallback" scroll-x="true"  scroll-y="true" >
      <image style="zoom:{{stv.scale}};" src="https://avatar.csdn.net/0/2/1/1_qq_36742720.jpg?1542353573"></image>
  </scroll-view>

  <view>
    <text>x: {{stv.offsetX}}</text>, 
    <text>y: {{stv.offsetY}}</text>, 
    <text>d: {{stv.distance}}</text>, 
    <text>s: {{stv.scale}}</text>, 
  </view>
</view>
 

.wxss

/**scale.wxss**/
.img {
  width: 100%;
  height: 500rpx;
  background: #AAA;
  text-align: center;
}
.img image {
  /* height: 800rpx;
  width: 600rpx; */
}

.js

//scale.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    stv: {
      offsetX: 0,
      offsetY: 0,
      zoom: false, //是否縮放狀態
      distance: 0,  //兩指距離
      scale: 1,  //縮放倍數
    }
  },
  //事件處理函式
  touchstartCallback: function (e) {
    //觸控開始
    console.log('touchstartCallback');
    console.log(e);

    if (e.touches.length === 1) {
      let { clientX, clientY } = e.touches[0];
      this.startX = clientX;
      this.startY = clientY;
      this.touchStartEvent = e.touches;
    } else {
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);
      this.setData({
        'stv.distance': distance,
        'stv.zoom': true, //縮放狀態
      })
    }

  },
  touchmoveCallback: function (e) {
    //觸控移動中
    console.log('touchmoveCallback');
    console.log(e);

    if (e.touches.length === 1) {
      //單指移動
      if (this.data.stv.zoom) {
        //縮放狀態，不處理單指
        return;
      }
      let { clientX, clientY } = e.touches[0];
      let offsetX = clientX - this.startX;
      let offsetY = clientY - this.startY;
      this.startX = clientX;
      this.startY = clientY;
      let { stv } = this.data;
      stv.offsetX += offsetX;
      stv.offsetY += offsetY;
      stv.offsetLeftX = -stv.offsetX;
      stv.offsetLeftY = -stv.offsetLeftY;
      this.setData({
        stv: stv
      });

    } else {
      //雙指縮放
      let xMove = e.touches[1].clientX - e.touches[0].clientX;
      let yMove = e.touches[1].clientY - e.touches[0].clientY;
      let distance = Math.sqrt(xMove * xMove + yMove * yMove);

      let distanceDiff = distance - this.data.stv.distance;
      let newScale = this.data.stv.scale + 0.005 * distanceDiff;
      // 為了防止縮放得太大，所以scale需要限制，同理最小值也是 
      if (newScale >= 2) {
        newScale = 2
      }
      if (newScale <= 0.6) {
        newScale = 0.6
      }
      this.setData({
        'stv.distance': distance,
        'stv.scale': newScale,
      })
    }

  },
  touchendCallback: function (e) {
    //觸控結束
    console.log('touchendCallback');
    console.log(e);

    if (e.touches.length === 0) {
      this.setData({
        'stv.zoom': false, //重置縮放狀態
      })
    }
  },
  onLoad: function () {
    console.log('onLoad');
  }
})