小程序單擊、雙擊、長按、滑動、雙指縮放事件詳解

1.單擊

觸發順序：touchstart → touchend → tap
單擊事件由touchstart、touchend組成,touchend後觸發tap事件。

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">點我吧</button>
</view>

mytouchstart: function(e){
    console.log(e.timeStamp + '- touch start')
},
mytouchend: function(e){
    console.log(e.timeStamp + '- touch end')
},
mytap: function(e){
    console.log(e.timeStamp + '- tap')
}

2.雙擊

觸發順序：touchstart → touchend → tap → touchstart → touchend → tap
雙擊事件由兩個單擊事件組成，兩次間隔時間小於300ms認爲是雙擊；微信官方文檔沒有雙擊事件，需要開發者自己定義處理。

<view>
  <button type="primary" bindtap="mytap">點我吧</button>
</view>

3.長按

觸發順序：touchstart → longpress → touchend → tap
長按事件手指觸摸後，超過350ms再離開。

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongpress="mylongtap" bindtouchend="mytouchend" bindtap="mytap">點我吧</button>
</view>

mytouchstart: function(e){
    console.log(e.timeStamp + '- touch start')
},
//長按事件
mylongtap: function(e){
    console.log(e.timeStamp + '- long tap')
},
mytouchend: function(e){
    console.log(e.timeStamp + '- touch end')
},
mytap: function(e){
    console.log(e.timeStamp + '- tap')
}

4. 滑動

手指觸摸屏幕並移動， 滑動事件由touchstart、touchmove、touchend組成

<view style="width:200px;height:300px;" bindtouchmove="touchmoveCall">
</view>

touchmoveCall: function(e){
	console.log(e)
}

參考官方鏈接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件詳解

5.雙指縮放

參考：https://www.jianshu.com/p/97a3857c133f

大體思路：監聽圖片加載完成 給圖片初始化寬高 ▶ 雙手指觸發開始 計算兩個手指座標的距離 ▶ 雙手指移動 計算兩個手指座標和距離 ▶ 根據探測到用戶的手指距離變化，確定圖片縮放倍數，然後根據倍數給圖片賦值新的寬高進行縮放圖片。

<view class='content'>
  <scroll-view class='images' scroll-y="true" scroll-x="true" style="height:100%;width:100%" bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">
    <image mode='aspectFit' binderror="errImg" src="{{dataimg}}" style="width:{{scaleWidth }};height:{{scaleHeight}}" bindload="imgload"></image>
  </scroll-view>
</view>

/**
   * 雙手指觸發開始 計算開始觸發兩個手指座標的距離
   */
  touchstartCallback: function(e) {
    // 單手指縮放開始，不做任何處理
    if (e.touches.length == 1) return;
    // 當兩根手指放上去的時候，將距離(distance)初始化。
    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({
      'distance': distance,
    })
  },

/**
   * 雙手指移動   計算兩個手指座標和距離
   */
  touchmoveCallback: function(e) {
    // 單手指縮放不做任何操作
    if (e.touches.length == 1) return;
    //雙手指運動 x移動後的座標和y移動後的座標
    let xMove = e.touches[1].clientX - e.touches[0].clientX;
    let yMove = e.touches[1].clientY - e.touches[0].clientY;
    //雙手指運動新的 ditance
    let distance = Math.sqrt(xMove * xMove + yMove * yMove);
    //計算移動的過程中實際移動了多少的距離
    let distanceDiff = distance - this.data.distance;
    let newScale = this.data.scale + 0.005 * distanceDiff
    // 爲了防止縮放得太大，所以scale需要限制，同理最小值也是
    if (newScale >= 1) {
      newScale = 1
      let scaleWidth = newScale * this.data.baseWidth + 'px'
      let scaleHeight = newScale * this.data.baseHeight + 'px'
      this.setData({
        'distance': distance,
        'scale': newScale,
        'scaleWidth': scaleWidth,
        'scaleHeight': scaleHeight,
        'diff': distanceDiff
      })
    }
    //爲了防止縮放得太小，所以scale需要限制
    if (newScale <= 0.3) {
      newScale = 0.3
      this.setData({
        'distance': distance,
        'scale': newScale,
        'scaleWidth': '100%',
        'scaleHeight': '100%',
        'diff': distanceDiff
      })
    }
  },