基于 Vue 的滑动删除卡片实现

应用场景

滑动删除卡片是一种常见且易于使用的交互模式，广泛应用于各种移动应用程序中。它允许用户通过向左或向右滑动卡片来触发删除操作，从而快速清理不需要的项目。

基本功能

本代码实现了基于 Vue.js 的滑动删除卡片功能。其主要功能包括：

• 创建可滑动的卡片列表，每个卡片包含一个图标和一段文本。
• 当用户向左或向右滑动卡片时，显示一个带有删除图标的红色按钮。
• 点击删除按钮将从列表中移除该卡片。

功能实现步骤

1. 导入依赖项

import { SwipeCell, Tabs, Tab } from 'vant';
import { ref } from 'vue';

2. 定义数据

const tabs = [
  { title: 'Tab 1' },
  { title: 'Tab 2' },
  { title: 'Tab 3' },
  { title: 'Tab 4' },
  { title: 'Tab 5' },
];

const activeTab = ref(0);

3. 创建卡片列表

<template>
  <div id="app">
    <van-tabs v-model="activeTab" :sticky="true">
      <van-tab v-for="tab in tabs" :key="tab.title">{{ tab.title }}</van-tab>
    </van-tabs>

    <van-swipe-cell left-width="90px">
      <template #left>
        <van-icon name="photo" size="24px" color="#1989fa" />
      </template>
      <template #default>
        <div style="height: 100px; line-height: 100px;">
          滑动删除
        </div>
      </template>
    </van-swipe-cell>

    <!-- ...省略其他卡片 -->
  </div>
</template>

4. 添加删除按钮

<template>
  <van-swipe-cell left-width="90px">
    <template #left>
      <van-icon name="photo" size="24px" color="#1989fa" />
    </template>
    <template #default>
      <div style="height: 100px; line-height: 100px;">
        滑动删除
      </div>
      <van-button type="danger" size="small" round @click="removeCard">
        <van-icon name="delete" />
      </van-button>
    </template>
  </van-swipe-cell>
</template>

<script>
export default {
  methods: {
    removeCard() {
      // 从列表中移除卡片
    }
  }
}
</script>

5. 处理删除操作

methods: {
  removeCard() {
    // 从列表中移除卡片
    this.$refs.swipeCell.close(); // 关闭滑动单元格
  }
}

总结与展望

通过本代码，我们了解了如何使用 Vue.js 实现滑动删除卡片功能。该功能为用户提供了一种直观且高效的方式来删除不需要的项目。

未来，该功能可以进一步拓展和优化，例如：

• 添加拖拽排序功能，允许用户调整卡片的顺序。
• 实现批量删除，允许用户一次性删除多个卡片。
• 支持自定义删除按钮样式和行为。