1.0.1 • Published 4 years ago
@mas.io/adc-jigsaw v1.0.1
安装
tnpm install --save @alipay/adc-jigsaw组件介绍
行业小程序滑动拼图行为验证组件。
建议：禁止页面下拉刷新，在页面json配置中加入 "allowsBounceVertical": "NO"
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| className | 否 | String | 组件容器自定义类名 | -- | -- |
| width | 否 | Number | 图片自定义宽度(rpx) | 700 | -- |
| height | 否 | Number | 图片自定义高度(rpx) | 350 | -- |
| text | 否 | String | 滑块旁边的文案 | '向右滑动填充拼图' | -- |
| delay | 否 | Number | 当验证失败后，自动刷新的时间间隔 | 1000 | -- |
| failLimit | 否 | Number | 验证失败的次数限制，达到后组件会禁用。默认-1不限制 | -1 | -- |
| trailLimit | 否 | Number | 移动轨迹数组trail（onValidate接收的参数）的最大长度 | 2000 | -- |
| onGetImageSrc | 是 | Function | 获取图片src的方法，在初始化和每次刷新时都会调用，需要在返回值中返回图片src。() => string;同步和异步都支持。 | -- | -- |
| onValidate | 是 | Function | 校验方法，当拼图成功后会发起，需要返回校验结果。(trail: []) => boolean;同步和异步都支持。trail是移动轨迹数组，记录了每一个touchMove经过的轨迹，用于校验。元素结构为：{ x: number, y: number, timeStamp: number } | -- | -- |
| onMaxFail | 否 | Function | 达到最大失败次数后发起的事件。 | -- | -- |
Slot
| Name | 说明 | 是否必传 |
|---|---|---|
| loading | 自定义loading | 否 |
| initial | 滑块在初始状态下的自定义图标 | 否 |
| pending | 滑块在滑到正确位置后，等待校验结果状态下的自定义图标 | 否 |
| success | 滑块在成功状态下的自定义图标 | 否 |
| fail | 滑块在失败状态下的自定义图标 | 否 |
在小程序中使用
{
"usingComponents": {
"mas-xxxx": "@alipay/adc-jigsaw/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<adc-jigsaw onValidate="onValidate" onGetImageSrc="onGetImageSrc" />Badges
1.0.1
4 years ago