滑动操作 SwipeAction

列表的功能扩展。

安装

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`