微信小程序如何实现九宫格手势签到功能

   好久没分享技术文章了

   站在巨人的肩膀实现

github组件地址:https://github.com/geminate/mini-gesture-lock

   直入主题.......

  效果图:

图片

图片

01

引入大佬写好的组件

引入组件放到自己的项目目录中(注意目录位置,影响调用)

图片

02

修改组件

修改组件,增加setPassWord参数。

目的:为了让设置手势密码的时候不显示错误红色线条!!!

图片

图片

03

使用组件

js代码:

  onEnd(data) {    //用户输入的密码    this.setData({      data: data.detail    });  },

json代码:​​​​​​​

{  "usingComponents": {    "mini-gesture-lock": "/components/miniGestureLock/index"  }}

wxml代码:​​​​​​​

  <view class="index-page">        <mini-gesture-lock container-width="{{600}}" cycleRadius="{{70}}" bind:end="onEnd" password="{{password}}" setPassWord="{{setPassWord}}"></mini-gesture-lock>        <view class="result">设置的顺序密码是:{{data}}</view>  </view>

wxss代码:​​​​​​​

.index-page {  box-sizing: border-box;  padding-top: 1rem;  height: 65vh;  width: 100vw;}.result {  text-align: center;}

console.log(欢迎交流:yxh1168888)

end

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值