当前位置：首页 > 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

分享给朋友：

vue实现表格

Vue 实现表格的方法在 Vue 中实现表格可以通过多种方式完成，以下是几种常见的方法：使用原生 HTML 表格 Vue 可以直接渲染原生 HTML 表格，通过 v-for 动态生成表格行和列。…

vue实现预约页面

Vue 预约页面实现步骤准备工作安装Vue CLI创建项目，确保已配置好开发环境。使用vue create appointment-page初始化项目，选择默认配置或手动配置。页面结构设计在…

vue 实现blog

Vue 实现博客的基本步骤使用 Vue 实现博客可以分为前端和后端两部分，前端使用 Vue.js 框架，后端可以选择 Node.js、Python 或其他服务端语言。以下是一个基于 Vue 的博客实…

vue slot实现

vue slot 的实现方法在 Vue 中，slot 是一种内容分发机制，允许父组件向子组件传递模板内容。以下是几种常见的 slot 实现方式：默认 slot 默认 slot 是最基础的 slo…

vue实现签章

Vue 实现签章功能签章功能通常包括手写签名、电子印章等。以下是基于 Vue 的实现方法：使用 canvas 实现手写签名安装依赖（如需要）： npm install signature_p…

vue实现123456

Vue 实现数字 123456 的显示在 Vue 中显示数字 123456 非常简单，可以通过以下方法实现：方法一：直接在模板中显示 <template> <div>…

vue实现滑动删除