Swift实现微信支付支付密码的输入效果

Posted 2023-04-28

参考技术A 效果图

主要介绍一下怎么写的
ios当中用户输入数据都是用的UITextField,显示的是小圆点,是因为在起始的时候 就将小圆点都加上去,然后隐藏,在用户输入的时候判断输入的是第几个字符然后再将小圆点一一进行显示.
1.弹出效果,弹出效果是用UIView动画写的

2.布局弹出的视图
上面的提示用的几个label就不再说了 主要是UITextField和几个小圆点以及左侧线的布局,在布局UITextField的同时将UITextField隐藏,因为不需要向用户展示输入框.再计算好各个6个圆点以及右侧分割线所在的位置,将小圆点也隐藏

3.实现UITextField的代理方法,在这个代理方法中处理小圆点的显示

封装的不是太好 可以自己知道原理后模仿着封装一个更好的
详细源码地址
https://github.com/canyeyujin/password

微信小程序6位支付密码输入框

参考技术A 微信小程序6位支付密码输入框

产品需求

微信小程序支付密码6位输入框

实现效果

非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置

实现原理

1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式

2.当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式

3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件

4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...）

其他说明

6位支付密码是一个很常见的需求。

在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。

Github地址： https://github.com/evan2020/six-Input-box