主题
SwipeAction 滑动菜单
侧滑显示操作按钮。多个项目可放入 fui-swipeaction-group，实现其他菜单自动关闭。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 滑动菜单组 -->
<fui-swipeaction-group>
<!-- 可侧滑的列表项 -->
<fui-swipe-action @click="handleAction">
<view>向左滑动</view>
</fui-swipe-action>
</fui-swipeaction-group>属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| buttons | Array | 菜单按钮对象数组 | [{ text: '删除', background: '#FF2B2B' }] |
| size | Number / String | 按钮字号，单位 rpx，单项配置优先 | 32 |
| color | String | 按钮文字颜色，单项配置优先 | #fff |
| show | Boolean | 是否显示菜单，自动关闭模式下尽量避免同时控制 | false |
| threshold | Number / String | 展开阈值，单位 px | 30 |
| disabled | Boolean | 是否禁止滑动 | false |
| autoClose | Boolean | 打开时是否关闭其他菜单 | true |
| clickClose | Boolean | 点击按钮后是否立即关闭 | true |
| marginTop | Number / String | 上外边距，单位 rpx | 0 |
| marginBottom | Number / String | 下外边距，单位 rpx | 0 |
| param | Number / String | 事件携带参数 | 0 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| click | 点击菜单按钮 | { index, item, param } |
| change | 菜单打开或关闭 | { isOpen, param } |
组实例的 reset() 用于修改按钮数据后重置样式，close() 关闭已打开的菜单。官网提到 custom 属性，但当前本地源码没有该属性，按钮插槽直接替换默认内容。
插槽
| 插槽 | 说明 |
|---|---|
| default | 可侧滑的主体内容 |
| buttons | 自定义操作按钮 |