当前位置：首页 > VUE

vue实现滑动删除

2026-02-18 04:11:45VUE

实现滑动删除的基本思路

在Vue中实现滑动删除功能通常需要结合触摸事件（touchstart、touchmove、touchend）或鼠标事件（mousedown、mousemove、mouseup）来检测用户的滑动操作。通过计算滑动距离，动态调整元素的位移，并在滑动超过阈值时触发删除操作。

使用CSS和事件监听实现

创建一个可滑动的列表项组件，通过transform属性实现滑动效果，结合事件监听判断滑动距离。

<template>
  <div class="list-container">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="list-item"
      @touchstart="startSwipe($event, index)"
      @touchmove="moveSwipe($event, index)"
      @touchend="endSwipe(index)"
      @mousedown="startSwipe($event, index)"
      @mousemove="moveSwipe($event, index)"
      @mouseup="endSwipe(index)"
    >
      <div class="item-content">{{ item.text }}</div>
      <div class="delete-button" @click="deleteItem(index)">删除</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '项目1', offsetX: 0 },
        { text: '项目2', offsetX: 0 },
        { text: '项目3', offsetX: 0 }
      ],
      startX: 0,
      isSwiping: false
    }
  },
  methods: {
    startSwipe(e, index) {
      this.startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX
      this.isSwiping = true
    },
    moveSwipe(e, index) {
      if (!this.isSwiping) return
      const currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX
      const diffX = currentX - this.startX
      if (diffX < 0) {
        this.items[index].offsetX = Math.max(diffX, -100)
      }
      e.preventDefault()
    },
    endSwipe(index) {
      if (this.items[index].offsetX < -50) {
        this.items[index].offsetX = -80
      } else {
        this.items[index].offsetX = 0
      }
      this.isSwiping = false
    },
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

<style>
.list-container {
  width: 100%;
  overflow: hidden;
}
.list-item {
  position: relative;
  height: 60px;
  margin: 10px 0;
  transition: transform 0.3s ease;
}
.item-content {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 0 15px;
  display: flex;
  align-items: center;
  z-index: 1;
  transform: translateX(v-bind('item.offsetX + "px"'));
}
.delete-button {
  position: absolute;
  right: 0;
  width: 80px;
  height: 100%;
  background: #ff5252;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
}
</style>

使用第三方库实现

对于更复杂的滑动删除需求，可以使用现成的Vue组件库，如vant、vuesax等，它们提供了内置的滑动单元格组件。

安装vant：

npm install vant

使用vant的SwipeCell组件：

<template>
  <van-swipe-cell v-for="(item, index) in items" :key="index">
    <template #left>
      <van-button square type="primary" text="选择" />
    </template>
    <van-cell :title="item.text" />
    <template #right>
      <van-button 
        square 
        type="danger" 
        text="删除" 
        @click="deleteItem(index)" 
      />
    </template>
  </van-swipe-cell>
</template>

<script>
import { SwipeCell, Button, Cell } from 'vant'
export default {
  components: {
    [SwipeCell.name]: SwipeCell,
    [Button.name]: Button,
    [Cell.name]: Cell
  },
  data() {
    return {
      items: [
        { text: '项目1' },
        { text: '项目2' },
        { text: '项目3' }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

性能优化建议

对于长列表，滑动删除可能会引起性能问题。建议使用虚拟滚动技术（如vue-virtual-scroller）来优化性能。

安装vue-virtual-scroller：

npm install vue-virtual-scroller

结合虚拟滚动实现：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="80"
    key-field="id"
    v-slot="{ item, index }"
  >
    <div class="list-item">
      <!-- 滑动删除内容 -->
    </div>
  </RecycleScroller>
</template>