美文网首页Ionic 2 花瓣 ..
仿支付宝验证码输入效果

仿支付宝验证码输入效果

作者: 天亮前被寻找的一只猫 | 来源:发表于2017-06-13 17:40 被阅读51次

    话不多说先上效果图,再说思路!  我这里是不贴代码的, 只说思路,如果你能理解,然后自己去实现,那也是一种进步!

    思路:    不分ios /安卓/前端    搭建的第一步显示效果 :  input输入框  通过事件监听 拿到输入的值,赋值给 要显示容器(我这里用的是button)  ....这是实现的思路,  如果你没做过 你还以为这是6个 input呢!  你肯定会掉进这个误区,虽然那样也可以做! 如果你看不懂我在说什么,那是因为你就没有思考过这个功能的实现思路,只想着去搜代码去了。

    一般的效果是 当我们点击输入框的时候,我们是看不到光标的! 并且还要触发弹出键盘事件 ...所以 我在6个Button 的最上面 盖了一个透明的input  这就是核心思想!  然后监听输入事件,拿到输入的值 赋值给button上显示!  就是这么简单!

    大体的思想就是这样的! 感觉很简单有没有?  至于输入的光圈怎么跟随移动, 输入完6个之后 怎么自动检测 等等的逻辑  都比较简单了.自己处理就好.  现在有了思路 就开始动手写吧!

    只要思路正确,写起来很快的.  就怕只会copy  连代码对错都不看  拿过去就用,用完自己都不懂代码是啥意思的.

    相关文章

      网友评论

        本文标题:仿支付宝验证码输入效果

        本文链接:https://www.haomeiwen.com/subject/gpxjqxtx.html