支付宝小程序营销组件 手势解锁·lock
与手机屏幕解锁类似，需要保证两次绘制的手势图案一致。
更多详细信息请参见 代码市场。
扫码体验
示例代码
安装
npm i ant-mini-lock --save注册
//.json
{
"usingComponents": {
"lock": "ant-mini-lock/src/lock/index"
}
}调用
<!-- .axml -->
<lock
canvasWidth="300"
canvasHeight="300"
drawColor="#3985ff"
canvasId="canvasLock"
chooseType="3"
titleColor="#000000"
titleText="绘制解锁图案"
onFinish="onFinish">
</lock>//.js
Page({
data: {
},
onFinish() {
console.log('finish');
}
});属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| canvasWidth | canvas 区域宽度，单位 px。 | Number | 300 |
| canvasHeight | canvas 区域高度，单位 px。 | Number | 300 |
| canvasId | canvas 区域 id。 | String | canvasLock |
| drawColor | 圆圈和连线绘制颜色。 | String | #3985ff |
| chooseType | 矩阵单边圆圈个数，默认九宫格。 | Number | 3 |
| titleColor | 标题文案颜色。 | String | #000000 |
| titleText | 标题默认文案。 | String | 绘制解锁图案 |
| onFinish | 刮奖回调，当绘制正确时触发。 | Function | ()=>{} |