微信小程式常六位付款密碼元件與模板寫法
阿新 • • 發佈:2019-01-31
先看看效果
Html程式碼
<view class="payPass_box1" wx:if="{{allinputF1}}"> <view class="qiueBtn" bindtap="hideBox">關閉</view> <view class="payPass_box_t">請輸入您的支付密碼</view> <view class="payPass_box_m"> <view class="payPass_box_m_in" bindtap="focusInput"> <view class="payPass_box_m_in_in" wx:for="{{6}}" wx:key="{{index}}"> <input data-index="{{index}}" bindinput="allInputBtn" type="number" confirm-hold="true" value="{{inputArr[index]}}" disabled="true" maxlength="1" password="{{true}}"/> </view> </view> <view class="indexTopInput"> <input value="{{inputStr}}" focus="{{allinputF1}}" maxlength="6" type="number" bindinput="passInput"/> </view> </view> </view>
Css程式碼
.payPass_box1{ font-size: 26rpx; color: #333; width: 640rpx; text-align: center; margin-top: 40rpx; height:400rpx; position: fixed; left: 50%; top: 30%; transform: translate(-50%,-50%); border: 2rpx #d1d1d1 solid; background: #fff; opacity: .9; } .payPass_box_t{ margin-top: 100rpx; } .payPass_box_m{ margin-top: 80rpx; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .payPass_box_m_in{ display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; } .payPass_box_m_in_in{ width: 70rpx; height: 70rpx; border:4rpx #bfbfbf solid; display: flex; justify-content: center; align-items: center; margin-right:8rpx; } .indexTopInput{ position: absolute; height: 100%; background: #000; opacity: 0.5; z-index: 2; left: 0rpx; background: red; left: -150%; } .indexTopInput input{ width: 100%; height: 100%; } .qiueBtn{ position: absolute; right: 20rpx; top: 10rpx; width: 80rpx; height: 60rpx; text-align: right; color: #999 }
元件的js程式碼
// components/sixpass/sixpass.js var http = require('../../utils/http.js'); Component({ /** * 元件的屬性列表 */ properties: { }, /** * 元件的初始資料 */ data: { allinputF1:true, inputArr:[], inputStr:'', focusF:[], allinput:'', }, /** * 元件的方法列表 */ methods: { passInput(e){ var that = this; var value = e.detail.value; var num = e.detail.cursor-1; this.triggerEvent("passInput") var inputArr = []; for(let i=0;i<=num;i++){ inputArr.push(value.substring(i,i+1)) } if(inputArr.length>=6){ that.setData({ inputSrr:value, inputArr:inputArr, allinput:value, }) console.log('密碼輸入完成 '+inputArr) }else{ that.setData({ inputSrr:value, inputArr:inputArr, allinput:'' }) } }, allInputBtn(e){ var that = this; var index = e.target.dataset.index; var focusF = http.forC(that.data.focusF); var inputArr = that.data.inputArr; var value = e.detail.value if(inputArr[index]){ inputArr[index] = ''; focusF[index] = '1'; }else{ inputArr[index] = value; focusF[index+1] = '1'; } that.setData({focusF:focusF,inputArr:inputArr}) }, // 點選關閉密碼框 hideBox(){ this.setData({allinputF1:false}) }, show(){ this.setData({allinputF1:true}) }, focusInput(){ console.log(this.data.inputStr) this.setData({allinputF1:true}) }, } })
json程式碼
{
"component": true,
"usingComponents": {}
}
在需要的地方引入元件
{
"usingComponents": {
"sixpass": "/components/sixpass/sixpass"
},
"navigationBarTitleText": "錢包-提現"
}
這樣就是引入成功了
然後開始在頁面呼叫sixpass這個六位密碼的元件
<sixpass id="sixpass" bind:passInput="passInput"></sixpass>
頁面js的引用
// 1.6.3以上模板元件寫法
passInput(e){
console.log(this.sixpass.data.allinput);
if(this.sixpass.data.allinput.length>=6){
console.log('已經完成'+this.sixpass.data.allinput)
}else{
console.log('還差點 '+this.sixpass.data.allinput)
}
},
值得注意的是小程式1.6.3以上才支援模板的寫法,需要低版本相容的這個就不好用了所以也可以用模板寫法來實現就是用的時候少寫一遍CSS與HTML
模板的HTML
<!-- 六位密碼模版 -->
<template name="passBox">
<view class="payPass_box1" wx:if="{{passObj.allinputF1}}">
<view class="qiueBtn" bindtap="hideBox">關閉</view>
<view class="payPass_box_t">請輸入您的支付密碼</view>
<view class="payPass_box_m">
<view class="payPass_box_m_in" bindtap="focusInput">
<view class="payPass_box_m_in_in" wx:for="{{6}}" wx:key="{{index}}">
<input data-index="{{index}}" bindinput="allInputBtn" type="number" confirm-hold="{{true}}" value="{{passObj.inputArr[index]}}" disabled="{{true}}" maxlength="1" password="{{true}}"/>
</view>
</view>
<view class="indexTopInput">
<input value="{{passObj.inputStr}}" focus="{{passObj.allinputF1}}" maxlength="6" type="number" bindinput="passInput"/>
</view>
</view>
</view>
</template>
模板的Css
/*密碼*/
.payPass_box1{
font-size: 26rpx;
color: #333;
width: 640rpx;
text-align: center;
margin-top: 40rpx;
height:400rpx;
position: fixed;
left: 50%;
top: 30%;
transform: translate(-50%,-50%);
border: 2rpx #d1d1d1 solid;
background: #fff;
opacity: .9;
}
.payPass_box_t{
margin-top: 100rpx;
}
.payPass_box_m{
margin-top: 80rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.payPass_box_m_in{
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}
.payPass_box_m_in_in{
width: 70rpx;
height: 70rpx;
border:4rpx #bfbfbf solid;
display: flex;
justify-content: center;
align-items: center;
margin-right:8rpx;
}
.indexTopInput{
position: absolute;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 2;
left: 0rpx;
background: red;
left: -150%;
}
.indexTopInput input{
width: 100%;
height: 100%;
}
.qiueBtn{
position: absolute;
right: 20rpx;
top: 10rpx;
width: 80rpx;
height: 60rpx;
text-align: right;
color: #999
}
模板寫法的js
傳入data資料
passObj:{
focusF:['1'] //第一個焦點獲取,
inputArr:[]//六位密碼的陣列,
inputStr:""//六位密碼,
allinputF1:false//是否顯示當前的六位密碼框,
},
下面的 JS思路寫法與元件一致就不在CTRL+C=>V了,各位大佬應該都看得懂。
感謝各位有閒情看完此篇部落格,不足之處還望指點~!