UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

158 lines (117 loc) 7.48 kB
--- nav: path: /components group: title: 数据展示 order: 8 toc: 'content' supportPlatform: ['alipay', 'wechat'] --- # SwipeAction 滑动组件 列表的功能扩展。通过滑动操作来展示隐藏的功能菜单。 ## 注意事项 1. 该组件的父级容器必须设置 width 和 height。 2. 两侧滑动按钮的宽度总和需一致。 3. 若 elasticity 设置为 false 时,较小的 damping 值可提供更佳的体验。 4. 每一侧的滑动二次确认只会触发第一个,其他不会触发。 5. 建议在基础库 2.0 的小程序中使用,1.0 版本(如钉钉小程序)中存在滑动体验缺陷(缺少 touchend 之后的滑动过渡效果)。 ## 引入 在 `index.json` 中引入组件 ```json "usingComponents": { #if ALIPAY "ant-swipe-action": "antd-mini/es/SwipeAction/index" #endif #if WECHAT "ant-swipe-action": "antd-mini/SwipeAction/index" #endif } ``` ## 代码示例 ### 基础用法 ```xml <ant-swipe-action rightButtons="{{[[ { text: 'favor', bgColor: '#CCCCCC', color: '#fff', width: 200, }, { text: 'rest', bgColor: '#1677FF', color: '#fff', width: 170, }, { text: 'delete', bgColor: '#FF2B00', color: '#fff', width: 140, }, ]]}}" elasticity="{{true}}" swiped="{{swipeIndex === index}}" onSwipeEnd="onSwipeEnd" onSwipeStart="onSwipeStart" onButtonTap="onButtonTap"> <view>右侧-三个按钮</view> </ant-swipe-action> ``` ### 按钮在左侧 设置`leftButtons`属性 <code src='../../demo/pages/SwipeActionLeft/index'></code> ### 改变按钮数量 <code src='../../demo/pages/SwipeActionNumber/index'></code> ### 禁用滑动回弹 设置`elasticity`属性为`false` <code src='../../demo/pages/SwipeActionAnimation/index'></code> ### 设置按钮宽度 设置 buttons 的`width`属性 <code src='../../demo/pages/SwipeActionWidth/index'></code> ### 设置滑动速度 设置`damping`属性 <code src='../../demo/pages/SwipeActionSpeed/index'></code> ### 按钮点击二次确认 设置 buttons 属性`confirmType`为`tap` <code src='../../demo/pages/SwipeActionTap/index'></code> ### 按钮滑出最大距离二次确认 设置 buttons 属性`confirmType`为`move` <code src='../../demo/pages/SwipeActionMove/index'></code> ### 左右两侧都有按钮 可同时设置`leftButtons`和`rightButtons` <code src='../../demo/pages/SwipeActionLeftRight/index'></code> ### 自定义按钮 <code src='../../demo/pages/SwipeActionSlot/index'></code> ### Demo 代码 <code src='../../demo/pages/SwipeAction/index'></code> ## API | 属性 | 类型 | 默认值 | 说明 | | ------------- | ----------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------ | | leftButtons | [SwipeButton](#SwipeButton) | [] | 左侧按钮 | | rightButtons | [SwipeButton](#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 | - | 按钮文字 | | slotName | string | - | slot 名称,可以自定义对应按钮的内容。`${slotName}-confirm`可以自定义确认时的按钮内容 | | bgColor | string | - | 按钮背景颜色 | | color | string | `#fff` | 按钮字体颜色 | | width | number | 150 | 按钮宽度 | | confirmType | `''` \| `'move'` \| `'tap'` | - | 二次确认类型:不触发二次确认 \| 滑动超出最大距离触发二次确认 \| 点击触发二次确认 | | confirmText | string | - | 二次确认的文案描述;若为空,则展示 text | ### 主题定制 #### 样式变量 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。 | 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 | | -------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------ | | --swipe-action-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | 滑动操作颜色 |