先看看效果
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了，各位大佬应该都看得懂。
感谢各位有闲情看完此篇博客，不足之处还望指点~！