安装

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