vue 左滑实现删除

Vue 左滑删除实现方法

使用 touch 事件监听滑动

在 Vue 中监听 touchstart、touchmove 和 touchend 事件，计算滑动距离来判断是否触发删除操作。通过动态绑定样式实现滑动效果。

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

<script>
export default {
  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() {
      // 删除逻辑
    }
  }
}
</script>

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

使用第三方库 vue-swipe-actions

vue-swipe-actions 是专门为 Vue 实现的滑动操作组件，简化了实现过程。

安装依赖：

npm install vue-swipe-actions

使用示例：

<template>
  <swipe-action>
    <template #left>
      <div class="content">可左滑删除的内容</div>
    </template>
    <template #right>
      <div class="delete" @click="deleteItem">删除</div>
    </template>
  </swipe-action>
</template>

<script>
import { SwipeAction } from 'vue-swipe-actions'
import 'vue-swipe-actions/dist/vue-swipe-actions.css'

export default {
  components: {
    SwipeAction
  },
  methods: {
    deleteItem() {
      // 删除逻辑
    }
  }
}
</script>

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

使用 CSS transform 和 transition

纯 CSS 方案结合 Vue 的数据绑定实现滑动效果，通过修改数据状态控制元素位置。

<template>
  <div class="swipe-container">
    <div class="swipe-content" :style="{ transform: `translateX(${offsetX}px)` }"
         @touchstart="startSwipe"
         @touchmove="moveSwipe"
         @touchend="endSwipe">
      <div class="item-content">滑动删除内容</div>
      <div class="delete-area" @click="confirmDelete">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      currentX: 0,
      offsetX: 0,
      isSwiping: false
    }
  },
  methods: {
    startSwipe(e) {
      this.startX = e.touches[0].clientX
      this.isSwiping = true
    },
    moveSwipe(e) {
      if (!this.isSwiping) return
      this.currentX = e.touches[0].clientX
      this.offsetX = Math.min(0, this.currentX - this.startX)
    },
    endSwipe() {
      this.isSwiping = false
      if (this.offsetX < -50) {
        this.offsetX = -80
      } else {
        this.offsetX = 0
      }
    },
    confirmDelete() {
      // 删除逻辑
    }
  }
}
</script>

<style>
.swipe-container {
  overflow: hidden;
  position: relative;
}
.swipe-content {
  display: flex;
  transition: transform 0.3s ease;
}
.item-content {
  flex: 1;
  padding: 15px;
  background: #fff;
}
.delete-area {
  width: 80px;
  background: red;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

移动端优化注意事项

• 防止页面滚动与滑动删除冲突，可在 touchmove 事件中调用 e.preventDefault()
• 设置合适的滑动阈值，通常 50px 左右触发删除操作
• 添加过渡动画使交互更流畅
• 考虑添加防抖处理避免频繁触发
• 在 PC 端可考虑添加鼠标事件支持