小程序仿微信支付数字键盘，微信支付数字键盘
前段时间在一个小程序中需要写个支付页面，刚开始用input来唤起手机自带的数字键盘，甲方说不好看，然后说微信支付页面做的就比较好。。。。于是就动手写了一个，倒是也没什么难点，也没什么好说的，都有注释。
最终效果
.wxml
<view class='page_box' catchtap='hindKeyboard'><view class='input_view' catchtap='hindKeyboard'><text class='title'>金额</text><view class='input_box' catchtap='showKeyboard'><text class='input_label'>￥</text><text class='content' wx:if="{{content}}">{{content}}</text><view class='className' wx:if="{{keyShow}}"></view><text class='content place' wx:if="{{!content}}">请输入金额</text></view></view><view class='keyboard {{keyShow&&"hind_box"}}'><view class='key_box'><view class="number_box"><view class='keys {{index==9?"zero":""}}' wx:for='{{KeyboardKeys}}' wx:key='this' catchtap='keyTap' data-keys='{{item}}'>{{item}}</view></view><view class="btn_box"><view class='keys' catchtap='keyTap' data-keys='<'><!-- 根据项目实际路径引用 --><image mode="widthFix" src="../image/delete_icon.png"></image></view><view class="keys pay_btn" catchtap='payTap'>付款</view></view></view></view></view>
delete_icon.png（用到的图片）
.wxss
page {background: #ffffff;height: 100vh;}.page_box {width: 100%;/* height: 100%; */background: #EDEDED;overflow: hidden;}.input_view {width: 100%;/* height:500rpx; */background: #fff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;padding: 30rpx 60rpx 40rpx 60rpx;box-sizing: border-box;}.title {display: block;font-size: 24rpx;color: #000;padding-left: 10rpx;}.input_box {/* background: #ffc; */display: flex;padding: 20rpx 0;height: 80rpx;border-bottom: 1px solid #efefef;}.input_label {font-size: 70rpx;font-weight: bold;margin-right: 5rpx;}.content {font-size: 70rpx;line-height: 90rpx;font-weight: bold;margin-top: 8rpx;}.content.place {font-size: 40rpx;color: #E2E2E2;font-weight: normal;margin-top: 8rpx;}.className {width: 6rpx;height: 66rpx;background: #43ad3f;border-radius: 6rpx;margin-top: 22rpx;animation: twinkling 1s infinite;}.animated {animation-duration: 1s;animation-fill-mode: both}@-webkit-keyframes twinkling {0% {opacity: 0;}100% {opacity: 1;}}.keyboard {height: 0;width: 100%;background: #f7f7f7;position: fixed;bottom: 0;left: 0;transition: height 0.3s;padding: 0 0 0 16rpx;z-index: 10;}.hind_box {height: 440rpx;}.key_box {overflow: hidden;}.number_box{width: calc((100% / 4 * 3) - 16rpx);display: inline-block;}.btn_box{width: calc(100% / 4);display: inline-block;}.keys {float: left;width: calc(100% / 3 - 16rpx);height: 90rpx;text-align: center;line-height: 90rpx;box-sizing: border-box;font-size: 40rpx;background: #fff;margin: 16rpx 16rpx 0 0;border-radius: 10rpx;font-weight: bold;}.keys.zero{width: calc((100% / 3) * 2 - 16rpx);}.keys image{width: 50rpx;height: auto;}.btn_box{width: calc((100% / 4));}.btn_box .keys{width: calc(100% - 16rpx);padding-top: 10rpx;}.btn_box .pay_btn{height: 298rpx;line-height: 298rpx;padding-top: 0;background: #05c160;font-size: 30rpx;color: #fff;font-weight: normal;}
.js
Page({/*** 页面的初始数据*/data: {content: '',//输入内容KeyboardKeys: [1, 2, 3 , 4, 5, 6, 7, 8, 9, 0,'·'],keyShow: true,//默认显示键盘},//点击界面键盘消失hindKeyboard() {var _this = this_this.setData({keyShow: false});},//点击输入框，键盘显示showKeyboard() {var _this = this_this.setData({keyShow: true});},keyTap(e) {var _this = this,keys = e.currentTarget.dataset.keys,content = _this.data.content,len = content.length;switch (keys) {case '·': //点击小数点，（注意输入字符串里的是小数点，但是我界面显示的点不是小数点，是居中的点，在中文输入法下按键盘最左边从上往下数的第二个键，也就是数字键1左边的键可以打出居中的点）if (len < 11 && content.indexOf('.') == -1) {//如果字符串里有小数点了，则不能继续输入小数点，且控制最多可输入10个字符串if (content.length < 1) {//如果小数点是第一个输入，那么在字符串前面补上一个0，让其变成0.content = '0.';} else {//如果不是第一个输入小数点，那么直接在字符串里加上小数点content += '.';}}break;case 0:console.log(content)if (len < 4) {console.log(content.length)if (content.length < 1) {//如果0是第一个输入，让其变成0.content = '0.';}else{content += '0'}}break;case '<': //如果点击删除键就删除字符串里的最后一个content = content.substr(0, content.length - 1);break;default:let Index = content.indexOf('.'); //小数点在字符串中的位置if (Index == -1 || len - Index != 3) {//这里控制小数点只保留两位if (len < 11) {//控制最多可输入10个字符串content += keys;}}break}_this.setData({content});},// 付款payTap(){var _this = this;console.log(_this.data.content)}})
到这里就结束了，使用的话微调一下样式问题应该不大
注：光标暂时不能移动，有能力的话自己研究一下
