Skip to content

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 均取消拖动并收起全部成员。

记录 · 思考 · 创作