vue实现左滑动删除

实现左滑动删除功能

在Vue中实现左滑动删除功能可以通过手势识别和CSS动画结合完成。以下是具体实现方法：

监听触摸事件

通过@touchstart、@touchmove和@touchend事件监听用户滑动操作：

<div 
  @touchstart="handleTouchStart"
  @touchmove="handleTouchMove"
  @touchend="handleTouchEnd"
  :style="{ transform: `translateX(${offsetX}px)` }"
>
  <!-- 内容区域 -->
  <div class="content">滑动删除我</div>

  <!-- 删除按钮 -->
  <div class="delete-btn" @click="handleDelete">删除</div>
</div>

处理滑动逻辑

在Vue组件中定义相关数据和方法：

data() {
  return {
    startX: 0,
    offsetX: 0,
    isDragging: false
  }
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX
    this.isDragging = true
  },
  handleTouchMove(e) {
    if (!this.isDragging) return
    const currentX = e.touches[0].clientX
    const diffX = currentX - this.startX

    // 限制只能向左滑动
    if (diffX < 0) {
      this.offsetX = Math.max(diffX, -80) // -80是最大滑动距离
    }
  },
  handleTouchEnd() {
    this.isDragging = false
    // 滑动超过阈值则保持打开状态
    if (this.offsetX < -40) {
      this.offsetX = -80
    } else {
      this.offsetX = 0
    }
  },
  handleDelete() {
    // 删除逻辑
  }
}

CSS样式设置

确保滑动元素和删除按钮正确布局：

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.content {
  width: 100%;
  background: white;
  transition: transform 0.3s ease;
  z-index: 1;
}

.delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

使用第三方库

考虑使用现成的Vue滑动组件如vue-touch-ripple或v-touch简化实现：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

然后在模板中使用：

<v-touch @swipeleft="onSwipeLeft">
  <div>滑动删除内容</div>
</v-touch>

注意事项

确保在移动设备上测试滑动效果，不同设备可能有不同的触摸灵敏度。可以添加touch-action: pan-yCSS属性来改善滚动体验。对于列表项滑动删除，需要为每个项维护独立的滑动状态。