這篇文章主要為大家展示了“微信小程序中如何設(shè)計(jì)密碼輸入框”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中如何設(shè)計(jì)密碼輸入框”這篇文章吧。

創(chuàng)新互聯(lián)建站提供高防物理服務(wù)器租用、云服務(wù)器、香港服務(wù)器、成都二樞服務(wù)器租用托管等

設(shè)計(jì)支付密碼的輸入框

效果如下：

實(shí)例代碼：

支付方式


微信支付



對(duì)公打款




錢包支付(余額:{{balance/100}}元)





錢包支付(余額不足)



確定




×
請(qǐng)輸入支付密碼
忘記密碼


￥
{{actual_fee/100}}



=1}}">


=2}}">


=3}}">


=4}}">


=5}}">


=6}}">

index.js

Page({
 data: {
  payment_mode: 1,//默認(rèn)支付方式 微信支付
  isFocus: false,//控制input 聚焦
  balance:100,//余額
  actual_fee:20,//待支付
  wallets_password_flag:false//密碼輸入遮罩
 },
 //事件處理函數(shù)
 
 onLoad: function () {
  
 },
 wx_pay() {//轉(zhuǎn)換為微信支付
  this.setData({
   payment_mode: 1
  })
 },
 offline_pay() {//轉(zhuǎn)換為轉(zhuǎn)賬支付
  this.setData({
   payment_mode: 0
  })
 },
 wallet_pay() {
  this.setData({//轉(zhuǎn)換為錢包支付
   payment_mode: 2
  })
 },
 set_wallets_password(e) {//獲取錢包密碼
  this.setData({
   wallets_password: e.detail.value
  });
  if (this.data.wallets_password.length == 6) {//密碼長度6位時(shí)，自動(dòng)驗(yàn)證錢包支付結(jié)果
   wallet_pay(this)
  }
 },
 set_Focus() {//聚焦input
  console.log('isFocus', this.data.isFocus)
  this.setData({
   isFocus: true
  })
 },
 set_notFocus() {//失去焦點(diǎn)
  this.setData({
   isFocus: false
  })
 },
 close_wallets_password () {//關(guān)閉錢包輸入密碼遮罩
  this.setData({
   isFocus: false,//失去焦點(diǎn)
   wallets_password_flag: false,
  })
 },
 pay() {//去支付
  pay(this)
 }
})
/*-----------------------------------------------*/
/*支付*/
function pay(_this) {
 let apikey = _this.data.apikey;
 let id = _this.data.id;
 let payment_mode = _this.data.payment_mode
 if (payment_mode == 1) {
 // 微信支付
 // 微信自帶密碼輸入框
  console.log('微信支付')
 } else if (payment_mode == 0) {
 // 轉(zhuǎn)賬支付 后續(xù)跳轉(zhuǎn)至傳轉(zhuǎn)賬單照片
  console.log('轉(zhuǎn)賬支付')
 } else if (payment_mode == 2) {
  // 錢包支付 輸入密碼
  console.log('錢包支付')
  _this.setData({
   wallets_password_flag: true,
   isFocus: true
  })
 }

}
// 錢包支付
function wallet_pay(_this) {
 console.log('錢包支付請(qǐng)求函數(shù)')
 /*
 1.支付成功
 2.支付失敗：提示；清空密碼；自動(dòng)聚焦isFocus:true，拉起鍵盤再次輸入
 */
}

index.wxss

page {
 height: 100%;
 width: 100%;
 background: #e8e8e8;
}

page .pay {
 display: flex;
 flex-direction: column;
 background: #fff;
}

page .pay .title {
 height: 90rpx;
 line-height: 90rpx;
 font-size: 28rpx;
 color: #353535;
 padding: 0 23rpx;
 border-bottom: 1rpx solid #ddd;
 box-sizing: border-box;
}

page .pay .wx_pay, page .pay .offline_pay, page .pay .wallet_pay {
 margin: 0 26rpx;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 2rpx solid #ddd;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: flex-start;
}

page .pay .wx_pay .icon, page .pay .offline_pay .icon,
page .pay .wallet_pay .icon {
 width: 34rpx;
 height: 34rpx;
 border: 2rpx solid #ddd;
 box-sizing: border-box;
 border-radius: 50%;
}

page .pay .wx_pay .icon.active, page .pay .offline_pay .icon.active,
page .pay .wallet_pay .icon.active {
 border: 10rpx solid #00a2ff;
}

page .pay .wx_pay text, page .pay .offline_pay text, page .pay .wallet_pay text {
 margin-left: 20rpx;
 color: #353535;
 font-size: 26rpx;
}

page .pay .wallet_pay {
 border: 0;
 border-top: 2rpx solid #ddd;
}

page .pay .offline_pay {
 border: 0 none;
}

page .save {
 margin: 80rpx 23rpx;
 color: #fff;
 background: #00a2ff;
 height: 88rpx;
 line-height: 88rpx;
 text-align: center;
 font-size: 30rpx;
 border-radius: 10rpx;
}

page .wallets-password {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
}

page .wallets-password .input-content-wrap {
 position: absolute;
 top: 200rpx;
 left: 50%;
 display: flex;
 flex-direction: column;
 width: 600rpx;
 margin-left: -300rpx;
 background: #fff;
 border-radius: 20rpx;
}

page .wallets-password .input-content-wrap .top {
 display: flex;
 align-items: center;
 height: 90rpx;
 border-bottom: 2rpx solid #ddd;
 justify-content: space-around;
}

page .wallets-password .input-content-wrap .top .close {
 font-size: 44rpx;
 color: #999;
 font-weight: 100;
}

page .wallets-password .input-content-wrap .top .forget {
 color: #00a2ff;
 font-size: 22rpx;
}

page .wallets-password .input-content-wrap .actual_fee {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #000;
 height: 100rpx;
 margin: 0 23rpx;
 border-bottom: 2rpx solid #ddd;
}

page .wallets-password .input-content-wrap .actual_fee span {
 font-size: 24rpx;
}

page .wallets-password .input-content-wrap .actual_fee text {
 font-size: 36rpx;
}

page .wallets-password .input-content-wrap .input-password-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 150rpx;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #000;
 box-sizing: border-box;
 width: 90rpx;
 height: 90rpx;
 border: 2rpx solid #ddd;
 border-left: none 0;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
 border-left: 2rpx solid #ddd;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot i {
 background: #000;
 border-radius: 50%;
 width: 20rpx;
 height: 20rpx;
}

page .wallets-password .input-content {
 position: absolute;
 opacity: 0;
 left: -100%;
 top: 600rpx;
 background: #f56;
 z-index: -999;
}

page .wallets-password .input-content.active {
 z-index: -99;
}

以上是“微信小程序中如何設(shè)計(jì)密碼輸入框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！