【微信小程序】簡單的手指拖拽效果

為需要拖拽的區域綁定一系列手指點擊移動事件，並動態定義移動過渡效果

  <view class="cover-container" 
  bindtouchstart="handlerTouchStart" 
  bindtouchmove="handlerTouchMove" 
  bindtouchend="handlerTouchEnd" 
  style="transform: {{coverTransform}}; transition:{{coverTransition}}"
  >

 

分別為手指點擊/手指移動/手指松開事件綁定對應的回調事件

通過手指點擊時獲取到手指起始坐標，通過手動移動事件獲取到手指移動后的距離（touches[0]代表捕獲的第一只手指），兩者一減得到手指移動的距離（注意正負值的問題）

通過動態設置coverTransform屬性來控制拖拽區域的移動，通過動態設置coverTransition屬性來設置不同場景下的動畫過渡效果（主要是松開后回彈的速度）

按照要求判斷移動的邊界，控制拖拽區域移動的范圍。

 

 // 手指點擊事件
  handlerTouchStart(event) {
    // 手指點擊前清除之前的過度效果
    this.setData({
      coverTransition: ''  //每次重新點擊取消過度效果
    })
    // 獲取手指起始坐標,找到捕獲的第一個手指
    startY = event.touches[0].clientY
  },
  // 手指移動事件
  handlerTouchMove(event) {
    moveY = event.touches[0].clientY
    // 計算手指移動的距離
    moveDistance = moveY - startY
    // 通過判斷來控制允許的收拾移動距離
    if (moveDistance < 0) {
      moveDistance = 0   // 拖拽區域不允許向上移動
    } else if (moveDistance > 80) (
      moveDistance = 80   // 拖拽區域的邊界為80（rpx）
    )
    // 控制cover移動，更新coverTransform的狀態數據
    this.setData({
      coverTransform: `translateY(${moveDistance}rpx)`  //這里必須帶單位rpx或者px
    })
  },
  // 手指松開事件
  handlerTouchEnd() {
    this.setData({
      coverTransform: 'translateY(0)',  //松開后位移變為0
      coverTransition: 'transform .2s linear'  //簡單的過度效果
    })
  },