微信小程序之支付密码输入demo

  在小程序中实现支付密码的输入,要解决几个问题:
  1、小程序要想唤起键盘,必须要借助input控件。通过input控件和其属性focus来唤起和隐藏输入键盘。

  2、要让input控件不可见。也就是要隐藏input控件

先看实现后的效果图:

微信小程序之支付密码输入demo

 

实现demo代码:

1、页面代码

微信小程序之支付密码输入demo

微信小程序之支付密码输入demo

<view catchtap='showInputLayer' class="btn_pay">立即支付</view> <!-- 密码输入框 --> <view wx:if='{{showPayPwdInput}}'> <view class='bg_layer'></view> <view class='input_main'> <view class='input_title'> <view class='input_back' catchtap='hidePayLayer'><text></text></view> <text>输入支付密码</text> </view> <view class='input_tip'><text>使用会员卡余额支付需要验证身份,验证通过后才可进行支付。</text></view> <view class='input_row' catchtap='getFocus'> <view class='pwd_item' wx:for='{{6}}' wx:key='item' wx:for-index='i'> <text wx:if='{{pwdVal.length>i}}'></text> </view> </view> <view class='forget_pwd' catchtap='hidePayLayer'>忘记密码</view> <input class='input_control' password type='number' focus='{{payFocus}}' bindinput='inputPwd' maxlength='6'/> </view> </view>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpysjs.html