vue 左滑实现删除

Vue 左滑删除实现方法

在 Vue 中实现左滑删除功能，可以通过结合手势事件和 CSS 动画来完成。以下是几种常见的实现方式：

使用 touch 事件监听

通过监听 touchstart、touchmove 和 touchend 事件来计算滑动距离：

<template>
  <div class="list-item" 
       @touchstart="handleTouchStart"
       @touchmove="handleTouchMove"
       @touchend="handleTouchEnd">
    <div class="content">滑动我删除</div>
    <div class="delete-btn">删除</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      moveX: 0,
      isMoving: false
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.moveX = e.touches[0].clientX - this.startX
      if (this.moveX < 0) {
        e.currentTarget.style.transform = `translateX(${this.moveX}px)`
      }
    },
    handleTouchEnd(e) {
      if (this.moveX < -50) {
        e.currentTarget.style.transform = 'translateX(-80px)'
      } else {
        e.currentTarget.style.transform = 'translateX(0)'
      }
    }
  }
}
</script>

使用 CSS transition 实现平滑动画

为滑动效果添加 CSS 过渡效果：

.list-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.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-touch 或 hammer.js 等手势库简化实现：

import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammer = new Hammer(this.$el)
    hammer.on('swipeleft', () => {
      this.$el.style.transform = 'translateX(-80px)'
    })
    hammer.on('swiperight', () => {
      this.$el.style.transform = 'translateX(0)'
    })
  }
}

完整组件示例

以下是一个完整的可复用左滑删除组件：

<template>
  <div class="swipe-container">
    <div class="swipe-content" :style="contentStyle" @click="handleClick">
      <slot></slot>
    </div>
    <div class="swipe-actions">
      <div class="swipe-delete" @click="handleDelete">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offsetX: 0,
      startX: 0
    }
  },
  computed: {
    contentStyle() {
      return {
        transform: `translateX(${this.offsetX}px)`
      }
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      const currentX = e.touches[0].clientX
      this.offsetX = Math.min(0, currentX - this.startX)
    },
    handleTouchEnd() {
      if (this.offsetX < -50) {
        this.offsetX = -80
      } else {
        this.offsetX = 0
      }
    },
    handleDelete() {
      this.$emit('delete')
    },
    handleClick() {
      if (this.offsetX < 0) {
        this.offsetX = 0
      } else {
        this.$emit('click')
      }
    }
  }
}
</script>

<style>
.swipe-container {
  position: relative;
  overflow: hidden;
}

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

.swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
}

.swipe-delete {
  width: 80px;
  background: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

注意事项

• 移动端开发需要添加 viewport meta 标签确保触摸事件正常工作
• 滑动距离阈值可以根据实际需求调整
• 考虑添加边界检查防止过度滑动
• 删除操作建议添加确认提示防止误操作
• 在列表中使用时需要注意每个项目的独立状态管理

以上方法可以根据项目需求选择使用原生事件监听或第三方库实现，CSS 过渡效果可以提升用户体验。