Shulou(Shulou.com)06/01 Report--

This article mainly introduces WeChat Mini Programs how to input the payment password demo related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this WeChat Mini Programs how to input the payment password demo article will have a harvest, let's take a look.

WeChat Mini Programs develops and implements the input of WeChat Pay's password, which should be solved:

1. If Mini Program wants to evoke the keyboard, it must use the input control. The input keyboard is aroused and hidden through the input control and its property focus.

2. Make the input control invisible. To make the cursor and input characters invisible, here is to position the input control to the left invisible range.

Implement the demo code:

1. Page code

Immediate payment enter the payment password to use the membership card balance payment needs to verify the identity, after the verification can be paid. Forget password 2, js code

/ / index.js// gets the application instance const app = getApp () Page ({data: {showPayPwdInput: false, / / whether to show the password input layer pwdVal:'', / / enter the password payFocus: true, / / text box focus}, onLoad: function () {this.showInputLayer ();}, / * display the payment password input layer * / showInputLayer: function () {this.setData ({showPayPwdInput: true, payFocus: true})) }, / * hide payment password input layer * / hidePayLayer: function () {var val = this.data.pwdVal; this.setData ({showPayPwdInput: false, payFocus: false, pwdVal:'}, function () {wx.showToast ({title: val,})});}, / * * get focus * / getFocus: function () {this.setData ({payFocus: true}) }, / * enter password listening * / inputPwd: function (e) {this.setData ({pwdVal: e.detail.value}); if (e.detail.value.length > = 6) {this.hidePayLayer ();}) 3, style

.btn _ pay {margin: 100rpx auto; width: 600rpx; height: 100rpx; line-height: 100rpx; border-radius: 100rpx; text-align: # d3a95a; color: # fff; font-size: 36rpx; text-align: center;} / * payment password css start * / .bg_layer {position: fixed; left: 0; top: 0; bottom: 0; right: 0th backgroundcolor: rgba (0,0,0,0.6); z-index: 9998;}. Input_main {position: fixed; left: 0 Bottom: 500rpx; width: 100%; height: 394rpx: # fff; z-index: 9999;}. Input_title {width: 100%; height: 90rpx; line-height: 90rpx; text-align: center;font-size: 32rpx; border-bottom: 1rpx solid # e2e2e2;} .input_back {position: absolute; left: 0; top: 0X width: 80rpx; height: 90rpx; display: flex; justify-content: center; align-items: center;}. Input_back text {width: 20rpxheight: 20rpxscape backgroundcolor: white Border: 1rpx solid # aaa;border-width: 5rpx 05rpx transform: rotate (- 45deg);} .input _ tip {margin: 30rpx; font-size: 24rpx; color: # 888;} / * password mask simulation * / .input_row {width: 690rpx; margin: 0 auto; height: 98rpx; position: relative;display: flex; align-items: center; border: 1rpx solid # e2e2; border-radius: 20rpx;} .input_row .pwd _ item {flex: 1; display: flex; align-items: center Justify-content: center;height: 100%; border-right: 1rpx solid # e2e2e2; position: relative;}. Pwd_item:nth-last-of-type (1) {border-right: 0;}. Pwd_item text {width: 30rpx; height: 30rpx; border-radius: 30rpx; background-color: # 555;} .forget _ pwd {float: right; margin: 30rpx; width: 100rpx; text-align: right; font-size: 24rpx; color: # ff7800 } / * text input box location: set to the left to hide * / .input_control {position: relative; left:-300rpx; bottom: 0; width: 100rpx; height: 100rpx;} this is the end of the article on "how WeChat Mini Programs inputs the payment password demo". Thank you for reading! I believe that everyone has a certain understanding of "WeChat Mini Programs how to input payment password demo" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.