微信小程序自定义键盘

在一些特殊项目中，会有密码输入功能，有些会要求自己写一个输入键盘。下边的demo代码是纯数字的一个自定义键盘，每次调起后，数字随机排列。

wxml

<view class="title">
  请输入6位查询密码
</view>
<view class="frame">
  <view class="flist">
    <view class="fitem" wx:for="{{6}}" wx:key="" bindtap="showkey"></view>
  </view>
  <!-- <view class="pwd">{{pwd}}</view> -->
  <view class="black">
    <text class="bitem" wx:for="{{pwd.length}}" wx:key=""></text>
  </view>
</view>
<view class="btn">确认</view>

<view class="key" style="bottom:{{bottom}}rpx">
  <view class="ktitt">人马银行安全键盘</view>
  <view class="tab">
    <view class="td" wx:for="{{arr}}" wx:key="" data-num="{{item}}" bindtap="getnum">{{item}}</view>
  </view>
  <view class="tabfoot">
    <view class="td" bindtap="hiddrenkey">
      <image src="/images/key.jpg"></image>
    </view>
    <view class="td" data-num="0" bindtap="getnum">0</view>
    <view class="td" bindtap="dele">
      <image src="/images/delete.jpg"></image>
    </view>
  </view>
</view>

wxss

page {
  font-family: PingFang-SC-Regular;
  /* background: #f2f2f2; */
  min-height:100vh;
}

.title {
  font-size: 30rpx;
  color: #333;
  text-align: center;
  padding-top: 150rpx;
}

.frame {
  width: 630rpx;
  margin: 40rpx auto 50rpx auto;
  position: relative;
}
.frame .pwd{
  font-size: 35rpx;
  color:#333;
  letter-spacing:87rpx;
  position: absolute;
  top:10%;left:13%;
}
.frame .black{
  width:100%;
  height:50rpx;
  position: absolute;
  top:45rpx;left:33rpx;
  z-index: 200;
}
.frame .black .bitem{
  display: inline-block;
  width:40rpx;height:40rpx;
  border-radius: 50%;
  background:#000;
  margin-right: 65rpx;
}
/* .frame .black .bitem:nth-child(4){
  margin-right: 60rpx;  
}
.frame .black .bitem:nth-child(5){
  margin-right: 60rpx;  
} */
.frame .black .bitem:last-child{
  margin-right: none;

}
.flist {
  width: 100%;
  height: 130rpx;
  display: flex;
  justify-content: space-between;
}

.flist .fitem {
  width: 100rpx;
  height: 130rpx;
  background: #f2f6fe;
  border-radius: 10rpx;
  border: 2rpx solid #808ca5;
  margin-right: 6rpx;
}

.btn {
  width: 630rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 36rpx;
  color: #fff;
  border-radius: 10rpx;
  margin: 40rpx auto;
  background: #808ca5;
}

.key {
  width: 100%;
  height: 575rpx;
  font-size: 30rpx;
  position: fixed;
  left: 0;
}

.key .ktitt {
  text-align: center;
  line-height: 115rpx;
  color: #808ca5;
  border-bottom: 2rpx solid #d0d3da;
}

.key .tab {
  font-weight: bold;
  color: #333;
  text-align: center;
}

.key .td {
  font-size: 35rpx;
  float: left;
  width: 249rpx;
  height: 115rpx;
  border-top: 1rpx solid #dddee2;
  border-right: 1rpx solid #dddee2;
  line-height: 115rpx;
}

.key .td:nth-child(3n) {
  border-right: none;
  width:250rpx;
}

.key .tabfoot {
  font-weight: bold;
  color: #333;
  text-align: center;
}
.tabfoot .td:nth-child(1),.tabfoot .td:nth-child(3){
  background:#e7ebf4;
  border-top: 1rpx solid #dddee2;
}

.td image{
  width:100%;height:100%;
}
.td:active{
  background:#e7ebf4;
}

js

// Page.js 文件
Page({
  data: {
    arr:['1','2','3','4','5','6','7','8','9'],
    bottom:0,
    pwd:""
  },
  dele(){
    var  that = this ;
    var  pwd=that.data.pwd
    pwd = pwd.substr(0, pwd.length - 1); 
    that.setData({
      pwd:pwd
    })
    // console.log(that.data.pwd)
  },
  getnum(e){
    var  that= this 
    console.log(e.currentTarget.dataset.num)
    var pwd = that.data.pwd, num = e.currentTarget.dataset.num;
    
    if(pwd.length==6){
      // console.log(that.data.pwd)
      that.hiddrenkey()
      return
    }else{
      pwd += num
      that.setData({
        pwd: pwd,
      })
      if (pwd.length == 6) {
        console.log(that.data.pwd)
        that.hiddrenkey()
        return
      }
    }
    
  },
  randomarr(){
    var that = this;
      var arr= that.data.arr
      var clonerArr = arr.concat();
      clonerArr.sort(function (n1, n2) {
        return Math.random() - 0.5;
      })
    console.log(clonerArr)
      return that.setData({
        arr: clonerArr
      })
    
  },
  showkey(){
    var  that = this;
    that.setData({
      bottom:0
    })
  },
  hiddrenkey(){
    var that = this ;
    var timeout=setInterval(()=>{
      if(that.data.bottom!=-750){
        var time = that.data.bottom
        time -= 50
        that.setData({
          bottom: time
        })
        // console.log(that.data.bottom)
        console.log(1)
      }else{
        console.log(0)
        clearInterval(timeout)
      }
      
    },10)
  },
  onLoad: function (options) {
    var  that= this;
    that.randomarr()
  }
})