当前位置：首页 > VUE

vue实现滑动删除

2026-01-17 11:35:15VUE

Vue 实现滑动删除功能

滑动删除是移动端常见的交互方式，可以通过 Vue 结合手势事件实现。以下是两种常见实现方案：

使用第三方库（如 `v-touch`）

安装 v-touch 库：

vue实现滑动删除

npm install vue-touch@next

注册组件并实现滑动：

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

// 模板
<v-touch @swipeleft="onSwipeLeft(item)">
  <div class="item">{{ item.text }}</div>
</v-touch>

// 方法
methods: {
  onSwipeLeft(item) {
    this.deleteItem(item)
  }
}

原生实现方案

通过监听 touch 事件计算滑动距离：

vue实现滑动删除

<div 
  @touchstart="touchStart"
  @touchmove="touchMove"
  @touchend="touchEnd"
  :style="{ transform: `translateX(${offsetX}px)` }"
>
  <!-- 内容 -->
  <button @click="confirmDelete">删除</button>
</div>

data() {
  return {
    startX: 0,
    offsetX: 0,
    deleteWidth: 80 // 删除按钮宽度
  }
},
methods: {
  touchStart(e) {
    this.startX = e.touches[0].clientX
  },
  touchMove(e) {
    const currentX = e.touches[0].clientX
    this.offsetX = Math.min(0, currentX - this.startX)
  },
  touchEnd() {
    if (Math.abs(this.offsetX) > this.deleteWidth/2) {
      this.offsetX = -this.deleteWidth
    } else {
      this.offsetX = 0
    }
  },
  confirmDelete() {
    // 删除逻辑
  }
}

CSS 过渡效果

添加平滑的滑动动画：

.item {
  transition: transform 0.3s ease;
  will-change: transform;
}
.delete-btn {
  width: 80px;
  background: #ff4444;
  color: white;
}

列表项实现注意事项

当在列表中使用时，需要为每个项维护独立的滑动状态：

data() {
  return {
    items: [
      { id: 1, text: 'Item 1', offset: 0 },
      { id: 2, text: 'Item 2', offset: 0 }
    ]
  }
}

性能优化建议

使用 will-change: transform 提升动画性能
避免在频繁触发的 touchmove 事件中进行复杂计算
对于长列表，考虑使用虚拟滚动技术

以上方案可根据具体需求选择，第三方库方案更快捷，原生实现更灵活可控。

标签: vue

分享给朋友：

eventbus vue实现

EventBus 实现原理 EventBus 是一种发布/订阅模式，用于 Vue 组件间的通信。核心是通过一个中央事件总线管理事件监听和触发。创建 EventBus 在 Vue 项目中创建一个独立…

vue交互实现

Vue 交互实现方法 Vue.js 提供了多种方式实现用户交互，包括事件处理、表单绑定、动态渲染等。以下是常见的交互实现方法：事件处理通过 v-on 或 @ 指令绑定事件，触发方法或直接执行表达…

实现vue table

Vue 表格实现方法基础表格实现使用 Vue 的 v-for 指令可以快速渲染表格数据。在模板中定义表格结构，通过数据绑定动态生成行和列。 <template> <tabl…

vue实现答辩

Vue 实现答辩系统的关键步骤项目初始化与配置使用 Vue CLI 或 Vite 创建项目，安装 Vue Router 管理路由，Pinia/Vuex 进行状态管理。配置 ESLint 和 Pre…

vue实现uuid

使用 uuid 库生成 UUID 在 Vue 项目中，可以使用 uuid 库来生成 UUID。安装依赖： npm install uuid 在 Vue 组件中使用： import { v4 as…

vue实现反转

实现数组反转在Vue中反转数组可以通过多种方式实现，以下是几种常见方法：使用JavaScript原生reverse方法 // 在methods中定义方法 methods: { revers…

vue实现滑动删除