n-swipe-action 滑动单元格分组
列表分组容器,负责注册、互斥、组级禁用与统一收起。普通列表只需配置菜单数据和内容插槽。
平台兼容性
| App | Web | 微信小程序 |
|---|---|---|
| √ | √ | √ |
API
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| autoClose | 打开成员时自动收起其他参与互斥的成员 | boolean | true |
| disabled | 禁用组内菜单交互并收起全部成员,内容插槽本身仍可操作 | boolean | false |
| threshold | 成员未单独设置时使用的吸附距离,单位 px,须为有限非负数 | number | 20 |
| customClass | 根节点额外类,须在组件样式表中定义 | string | |
| customStyle | 根节点行内样式 | string |
插槽
| 名称 | 说明 |
|---|---|
| default | 列表内容;参数 |
方法
| 名称 | 说明 |
|---|---|
| closeAll | 收起全部成员并取消进行中的拖动 |
实现说明
| 参考做法 | 本组件做法 | 分歧理由 |
|---|---|---|
| 分组管理、自动关闭、禁用和吸附距离 | 容器统一提供 autoClose、disabled、threshold;成员可覆盖距离或退出互斥 | 普通列表只需配置一次,成员独立使用也完整 |
| 组实例 open/close 按索引控制成员 | 成员 v-model 数组或实例方法承担 | 动态列表维护索引映射易错,受控绑定由渲染层保证一致 |
| 组级 click 点击事件 | 内容点击由内容插槽自身事件承接 | 点击语义属业务内容,容器转发无法携带内容上下文 |
| 吸附距离按菜单宽度比例 | threshold 为像素值,成员侧自动收敛到菜单半宽以内 | 像素值直观可预估,短菜单下半宽上限兜底 |
| 手势方向锁与吸附 | 成员侧单指跟踪、纵向放行、横向阻止默认行为、取消恢复原状态 | 避免多指锁死及取消手势误展开 |
- 成员支持主菜单与反向菜单双向滑动,互斥以行为单位:一行同时最多展开一个菜单,打开时其余参与成员收起。
- 关闭组互斥后可多行展开,重新开启时保留最后操作的参与成员;切页、切后台和 closeAll 均取消拖动并收起全部成员。