# 滑动操作 SwipeAction

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/swipe-action
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

列表的功能扩展。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

列表的功能扩展。

## 何时使用

通过滑动操作来展示隐藏的功能菜单。

## 示例

## SwipeAction

### 属性

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| closeOnAction | 是否在点击操作按钮时自动归位 | `boolean` | `true` |  |
| closeOnTouchOutside | 是否在点击其他区域时自动归位 | `boolean` | `true` |  |
| leftActions | 左侧的操作按钮列表 | `Action[]` | `[]` |  |
| rightActions | 右侧的操作按钮列表 | `Action[]` | `[]` |  |
| onAction | 点击操作按钮时触发 | `(action: Action, e: React.MouseEvent) => void` | - |  |
| stopPropagation | 阻止某些事件的冒泡 | `PropagationEvent[]` | `[]` |  |
| onActionsReveal | 按钮完全出现时触发 | `(side: 'left' \| 'right') => void` | - |  |
| onClose | 滑动条归位时触发 | `() => void` | - | 5.39.0 |

### Action

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 颜色 | `'light' \| 'weak' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| string` | `'light'` |
| key | 唯一标识 | `string \| number` | - |
| onClick | 点击时触发 | `(e: React.MouseEvent) => void` | - |
| text | 文字 | `ReactNode` | - |

## Ref

| 属性 | 说明 | 类型 |
| --- | --- | --- |
| close | 让滑动条归位 | `() => void` |
| show | 滑动出操作按钮，`side` 参数默认为 `right` | `(side?: 'left' \| 'right') => void` |

### CSS 变量

| 属性         | 说明     | 默认值    |
| ------------ | -------- | --------- |
| --background | 背景颜色 | `#ffffff` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt