【微信小程序】简单的手指拖拽效果

为需要拖拽的区域绑定一系列手指点击移动事件，并动态定义移动过渡效果

  <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'  //简单的过度效果
    })
  },