nav: path: /components group: title: 信息展示 order: 8

toc: 'content'

SwipeAction 滑动组件

列表的功能扩展。

何时使用

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

Tip

该组件的父级容器必须设置 width 和 height。
两侧滑动按钮的宽度总和需一致。
若 elasticity 设置为 false 时，较小的 damping 值可提供更佳的体验。
每一侧的滑动二次确认只会触发第一个，其他不会触发。
建议在基础库 2.0 的小程序中使用，1.0 版本（如钉钉小程序）中存在滑动体验缺陷（缺少 touchend 之后的滑动过渡效果）。

代码示例

基础用法

按钮在左侧

改变按钮数量

禁用滑动回弹

设置按钮宽度

设置滑动速度

按钮点击二次确认

按钮滑出最大距离二次确认

左右两侧都有按钮

API

属性	类型	默认值	说明
leftButtons	SwipeButton	[]	左侧按钮
rightButtons	SwipeButton	[]	右侧按钮
damping	number	70	滑动速度
elasticity	boolean	`true`	滑动弹性
swiped	`''` \| `'left'` \| `'right'`	`false`	是否滑开
defaultSwiped	`''` \| `'left'` \| `'right'`	`false`	是否默认滑开
disabled	boolean	`false`	禁止滑动
onSwipeStart	滑动开始的回调函数	(data: object, e: string) => void	e: 组件上 data-xxx 中的数据；data: direction(滑动的按钮是左边还是右边)，swiped(是否滑开)
onSwipeEnd	滑动结束的回调函数	(data: object, e: string) => void	e: 组件上 data-xxx 中的数据；data: direction(滑动的按钮是左边还是右边)，swiped(是否滑开)
onButtonTap	按钮触发的回调函数	(data: object, e: string) => void	e: 组件上 data-xxx 中的数据；data: direction(滑动的按钮是左边还是右边)，btnIdx(按钮的索引，靠近主体部分为 0)

SwipeButton

属性	类型	默认值	说明
text	string	-	按钮文字
bgColor	string	-	按钮背景颜色
color	string	`#fff`	按钮字体颜色
width	number	150	按钮宽度
confirmType	`''` \| `'move'` \| `'tap'`	-	二次确认类型：不触发二次确认 \| 滑动超出最大距离触发二次确认 \| 点击触发二次确认
confirmText	string	-	二次确认的文案描述；若为空，则展示 text