マイクロチャネル支払いアプレットボックスのスタイルと機能

1、ページコード

<ビューcatchtap = 'showInputLayer'クラス = "btn_pay"> 今、支払い</ビュー> 
- < -パスワード入力ボックス！> 
<ビューWX：IF = '{} {} showPayPwdInput'> 
    <Viewクラス= 'bg_layer' > </ビュー> 
    <Viewクラス= 'input_main'> 
        <Viewクラス= 'input_title'> 
            <Viewクラス= 'input_back' catchtap = 'hidePayLayer'> <テキスト> </テキスト> </ビュー> 
            <テキスト>入力支払いパスワード</テキスト> 
        </ビュー> 
        <ビュークラス=「input_tip」> <テキスト>支払いの会員カードの残高を使用して、彼らはによって検証した後に支払うことができる前に認証する必要があります。</テキスト> </ビュー> 
        <ビュークラス= catchtap = 'をGetFocus' 'input_row'> 
            <Viewクラス= 'pwd_item'
        <ビュークラス= '忘れた' catchtap = 'hidePayLayer'>忘记密码</ビュー> 
        <入力クラス=パスワードタイプ= '番号'フォーカス= '{{payFocus}}' bindinput = 'inputPwd' MAXLENGTH = ' 'input_control' 6 「/> 
    </ビュー> 
</ビュー>

　　JSコード

//index.js 
//応用例の取得
のconst = getAppのApp（）

のページ（{ 
  {：データ
    パスワード入力層表示するかどうかをfalseに、//：showPayPwdInput 
    pwdValを： ''、//パスワードが入力された
    payFocusを：真、//テキストをフォーカス枠
  }、
  のonLoad：関数（）{ 
    this.showInputLayer（）; 
  } 
  / ** 
   *支払いパスワード入力レイヤ表示
   * / 
  showInputLayer：関数（）{ 
    this.setData（{showPayPwdInput：trueに、payFocus：真へ}）。
  } 
  / ** 
   *支払パスワード隠された層
   * / 
  hidePayLayer：機能（）{ 
    / *は、パスワードを入力します* / 
    VAR =ヴァルthis.data.pwdVal; 
	この呼び出しで/ ** **支払インターフェース/
    this.setData（{showPayPwdInput：偽、pwdVal：payFocus、偽''}、関数（）{ 
      / **弹框** / 
      wx.showToast（{ 
        タイトル：ヴァル、
      }）
    }）。

  } 
  / ** 
   *获取焦点
   * / 
  をGetFocus：関数（）{ 
    this.setData（{payFocus：真}）。
  } 
  / ** 
   *输入密码监听
   * / 
  inputPwd：機能（E）{ 
      this.setData（{pwdVal：e.detail.value}）。

      IF（e.detail.value.length> = 6）{ 
        this.hidePayLayer（）。
      } 
  } 
}）

　　CSSスタイル

.btn_pay { 
  マージン：100rpx自動。幅：600rpx。高さ：100rpx。行の高さ：100rpx。国境半径：100rpx。
  背景色：＃1 d3a95a。色：#FFF; フォントサイズ：36rpx。テキスト整列：センター; 
} 
/ *支付密码CSS * /開始
.bg_layer { 
  位置：固定します。左：0; トップ：0; 下：0; 右：0; 
  背景色：RGBA（0、0、0、0.6）。Zインデックス：9998; 
} 
.input_main { 
    位置：固定されました。左：0; 下：500rpx。幅：100％; 高さ：394rpx。
    背景色：#FFF; Zインデックス：9999; 
} 
.input_title { 
    幅：100％。高さ：90rpx。行の高さ：90rpx。テキスト整列：センター; 
    フォントサイズ：32rpx。border-bottom：1rpx固体＃e2e2e2。
}
.input_back { 
    位置：絶対。左：0; トップ：0; 
    幅：80rpx。高さ：90rpx。表示：フレックス。正当化-コンテンツ：センター; ALIGN-アイテム：センター; 
} 
.input_backテキスト{ 
  幅：20rpx。
  高さ：20rpx。
  背景色：白; 
  ボーダー：1rpx固体#aaa。
  ボーダー幅：5rpx 0 0 5rpx。
  変換：回転（-45deg）。
} 

.input_tip {マージン：30rpx。フォントサイズ：24rpx。色：＃888; } 

/ *密码掩码模拟* / 
.input_row { 
  幅：690rpx。マージン：0自動; 高さ：98rpx。位置：相対; 
  表示：フレックス。ALIGN-アイテム：センター; ボーダー：＃e2e2e2 1rpx固体; 国境半径：20rpx。
} 
{.pwd_itemを.input_row 
  フレックス：1。表示：フレックス。ALIGN-アイテム：センター; 正当化-コンテンツ：センター;
  高さ：100％; ボーダー右：1rpx固体＃e2e2e2。位置：相対; 
} 
.pwd_item：第n-最後の式（1）{ボーダー右：0。} 
.pwd_itemテキスト{ 
  幅：30rpx。高さ：30rpx。国境半径：30rpx。背景色：＃555; 
} 


.forget_pwd { 
  フロート：右。マージン：30rpx。幅：100rpx。テキスト整列：右; フォントサイズ：24rpx。色：＃ff7800と、
} 

/ *文本输入框位置：设置到左边隐藏* / 
.input_control { 
  位置：相対。左：-300rpx。下：0; 幅：100rpx。高さ：100rpx。
}

マイクロチャネル支払いアプレットボックスのスタイルと機能

おすすめ