vue实现左滑删除

Vue 实现左滑删除功能

使用 touch 事件和 CSS 过渡

监听 touchstart、touchmove 和 touchend 事件，结合 CSS 过渡效果实现左滑删除。

<template>
  <div class="list-item" 
       @touchstart="handleTouchStart"
       @touchmove="handleTouchMove"
       @touchend="handleTouchEnd">
    <div class="content">{{ item.text }}</div>
    <div class="delete-btn" @click="handleDelete">删除</div>
  </div>
</template>

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

<style>
.list-item {
  display: flex;
  width: 100%;
  position: relative;
  transition: transform 0.3s ease;
  overflow: hidden;
}
.content {
  flex: 1;
  padding: 10px;
}
.delete-btn {
  width: 80px;
  background: #ff4949;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用第三方库 vue-swipe-actions

安装 vue-swipe-actions 可以快速实现左滑删除功能。

npm install vue-swipe-actions

<template>
  <swipe-action>
    <template #left>
      <div class="swipe-content">{{ item.text }}</div>
    </template>
    <template #right>
      <div class="swipe-delete" @click="handleDelete">删除</div>
    </template>
  </swipe-action>
</template>

<script>
import { SwipeAction } from 'vue-swipe-actions'
export default {
  components: { SwipeAction },
  props: ['item'],
  methods: {
    handleDelete() {
      this.$emit('delete', this.item.id)
    }
  }
}
</script>

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

使用 CSS transform 和 transition

通过 CSS 的 transform 和 transition 属性实现平滑的左滑效果。

<template>
  <div class="swipe-container">
    <div class="swipe-content" :style="{ transform: `translateX(${offsetX}px)` }"
         @touchstart="startDrag"
         @touchmove="onDrag"
         @touchend="endDrag">
      {{ item.text }}
    </div>
    <div class="swipe-action" @click="handleDelete">删除</div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      startX: 0,
      currentX: 0,
      offsetX: 0,
      dragging: false
    }
  },
  methods: {
    startDrag(e) {
      this.dragging = true
      this.startX = e.touches[0].clientX
    },
    onDrag(e) {
      if (!this.dragging) return
      this.currentX = e.touches[0].clientX
      this.offsetX = this.currentX - this.startX
      if (this.offsetX > 0) this.offsetX = 0
    },
    endDrag() {
      this.dragging = false
      if (this.offsetX < -50) {
        this.offsetX = -80
      } else {
        this.offsetX = 0
      }
    },
    handleDelete() {
      this.$emit('delete', this.item.id)
    }
  }
}
</script>

<style>
.swipe-container {
  position: relative;
  overflow: hidden;
  height: 60px;
}
.swipe-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 80px;
  height: 100%;
  background: white;
  transition: transform 0.3s ease;
  padding: 10px;
}
.swipe-action {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: #ff4949;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

注意事项

• 移动端开发时需要考虑 touch 事件的兼容性
• 滑动阈值需要根据实际需求调整
• 删除操作应该提供确认机制防止误触
• 列表渲染时需要注意性能优化