@tanzhenxing/zx-swipe-cell v1.0.2

zx-swipe-cell 滑动单元格

zx-swipe-cell 组件允许用户通过左右滑动来显示隐藏的操作按钮，常用于列表项的操作，如删除、编辑等。

特性

• 支持左滑和右滑操作。
• 可自定义左侧和右侧滑动区域的内容。
• 支持禁用滑动。
• 支持异步关闭，允许在关闭前执行自定义逻辑（例如确认对话框）。
• 提供了 open, close, click 事件。
• 可通过 ref 调用 open 和 close 方法。
• 兼容 H5、小程序和 App 端。

基本用法

<template>
  <zx-swipe-cell>
    <template #left>
      <view style="background-color: #007aff; color: white; padding: 0 20px; height: 100%; display: flex; align-items: center;">选择</view>
    </template>
    <view style="padding: 10px; border-bottom: 1px solid #eee;">
      这是一个可以滑动的单元格
    </view>
    <template #right>
      <view style="background-color: #dd524d; color: white; padding: 0 20px; height: 100%; display: flex; align-items: center;" @click="onDelete">删除</view>
      <view style="background-color: #f0ad4e; color: white; padding: 0 20px; height: 100%; display: flex; align-items: center;">收藏</view>
    </template>
  </zx-swipe-cell>
</template>

<script setup>
const onDelete = () => {
  uni.showToast({
    title: '点击了删除',
    icon: 'none'
  });
};
</script>

API

Props

Slots

Events

beforeClose 回调参数

beforeClose 的第一个参数为对象，包含以下属性：

Methods

通过 ref 获取到组件实例后，可以调用以下方法：

<template>
  <zx-swipe-cell ref="swipeCellRef">
    <view style="padding: 10px;">内容</view>
    <template #right>
      <view style="background-color: #dd524d; color: white; padding: 0 20px;" @click="closeCell">关闭</view>
    </template>
  </zx-swipe-cell>
  <button @click="openRight">通过 Ref 打开右侧</button>
</template>

<script setup>
import { ref } from 'vue';

const swipeCellRef = ref(null);

const openRight = () => {
  if (swipeCellRef.value) {
    swipeCellRef.value.open('right');
  }
};

const closeCell = () => {
  if (swipeCellRef.value) {
    swipeCellRef.value.close();
  }
}
</script>

注意事项

• 重要：leftWidth 和 rightWidth 若不设置或设置为 'auto'，则对应的滑动区域宽度为 0，即不显示。您必须为这两个属性提供明确的以 px 为单位的数值（例如 left-width="60" 或 :left-width="60"），才能使滑动区域可见并正常工作。
• 组件内部不再尝试通过 getRect 动态计算 auto 宽度，以保证跨平台行为的一致性和可预测性。
• beforeClose 返回 Promise 时，可以实现例如删除前的确认弹窗等交互。
• 滑动操作的灵敏度和行为尽量模拟原生体验，但在不同平台和设备上可能存在细微差异。