小程序中手指触摸移动，触摸动作结束后恢复

燕燕燕燕燕

已于 2022-07-27 15:42:56 修改

阅读量525

点赞数

分类专栏：微信小程序文章标签：小程序

于 2022-07-27 15:41:35 首次发布

本文链接：https://blog.csdn.net/qq_38778882/article/details/126015908

版权

微信小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

上效果图
原始：
在这里插入图片描述
手指摸着下面白色区域可以往下移动

手指松开后恢复原始状态

在白色内容所在区域添加触摸事件

 <view class="cover-container" bindtouchstart="handleTouchStart"
    bindtouchmove="handleTouchMove" bindtouchend="handleToucheEnd"
    style="transform: {{coverTransform}};transition: {{coverTransition}}">
    ...
 </view>

在js页面写逻辑

  //定义所需变量
  var startY = 0;
  var moveY = 0;
  var moveDistance = 0;
  //手指触摸动作开始
  handleTouchStart(event) {
    //如果不加这句，会导致第二次触摸移动的时候带过滤动效，但是需求是只用回弹的时候带动效
    this.setData({
      coverTransition: ''
    });
    startY = event.touches[0].clientY;
  },
  //手指触摸后移动
  handleTouchMove(event) {
    moveY = event.touches[0].clientY;
    moveDistance = moveY - startY;
    //只能向下移动
    if (moveDistance <= 0) {
      return;
    }
    //规定的最大移动距离
    if (moveDistance >= 80) {
      moveDistance = 80;
    }
    this.setData({
      coverTransform: `translateY(${moveDistance}rpx)`
    });
  },
  //手指触摸动作结束
  handleToucheEnd() {
    this.setData({
      coverTransform: `translateY(0)`,
      coverTransition: 'transform 1s linear'
    });
  }