微信小程序数字键盘（仿微信转账键盘）

微信小程序input自带数字输入键盘，不过是直接调用的系统键盘，无法个性化。

代码中使用使用了Vant WeappVant UI小程序版，这里就不介绍相关安装说明了，大家自行安装Vant Weapp。

json 用到的组件

{"usingComponents": {"van-cell": "@vant/weapp/cell/index","van-button": "@vant/weapp/button/index","van-popup": "@vant/weapp/popup/index","van-field": "@vant/weapp/field/index","van-row": "@vant/weapp/row/index","van-col": "@vant/weapp/col/index"}
}

wxml 结构

<van-cell title="分数" value="{{score || '点击打分'}}" bindtap="tapScore" /><!-- 打分键盘 -->
<van-popupshow="{{ keyboardShow }}"position="bottom"custom-style="height: 508rpx;"bind:close="onClose"
><view class="keyborad"><view class="input"><van-fieldvalue="{{ value }}"custom-style="border: 2prx solid #dcdee0"placeholder="请选择分数"disabled/></view><view class="number-keyboard"><van-row class="number" gutter="10"><van-colwx:for="{{number}}"wx:key="index"data-key="{{item}}"custom-class="number-item"span="{{item === 0 ? '16' : '8'}}"bindtap="tapNumber"><view class="number-item__key tap-key">{{item}}</view></van-col></van-row><view class="operation"><view class="del tap-key" bindtap="tapBksp"><image class="del-icon" src="/assets/backspace.png"></image></view><view class="confirm tap-key" bindtap="confirm">确定</view></view></view></view>
</van-popup>

js 内容

Page({data: {score: '',keyboardShow: false,value: '',number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.']},tapScore() {this.setData({keyboardShow: true})},onClose() {this.setData({keyboardShow: false})},// number点击tapNumber(e) {const { key } = e.currentTarget.datasetlet { value } = this.datavalue += key/*** 限制输入* 开头不能是小数点* 只能有一位小数点* 0开头只能跟小数点* 小数点后限制一位*/value = String(value).replace(/^\./g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^00$/, '0').replace(/^0(\d)/g, '$1').replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3')this.setData({value})},// 退格tapBksp() {let { value } = this.datavalue = String(value)value = value.substr(0, value.length - 1)this.setData({value})},// 确定confirm() {let { value } = this.datathis.setData({score: value,keyboardShow: false})},
})

wxss 样式

.keyborad .number-keyboard {display: flex;background-color: #ebedf0;padding: 20rpx 20rpx 0 20rpx;
}
.keyborad .number-keyboard .tap-key:active {opacity: 0.8;
}
.keyborad .number-keyboard .number {flex: 1;
}
.keyborad .number-keyboard .number .number-item {margin-bottom: 20rpx;
}
.keyborad .number-keyboard .number .number-item .number-item__key {background-color: #fff;text-align: center;height: 80rpx;line-height: 80rpx;border-radius: 8rpx;font-size: 32rpx;font-weight: 700;
}
.keyborad .number-keyboard .operation {width: 200rpx;display: flex;flex-direction: column;margin: 0 0 20rpx 20rpx;
}
.keyborad .number-keyboard .operation .del {height: 80rpx;text-align: center;margin-bottom: 20rpx;background-color: #fff;border-radius: 8rpx;display: flex;align-items: center;justify-content: center;
}
.keyborad .number-keyboard .operation .del .del-icon {width: 40rpx;height: 40rpx;
}
.keyborad .number-keyboard .operation .confirm {flex: 1;display: flex;align-items: center;justify-content: center;background-color: #04943f;border-radius: 8rpx;color: #fff;font-size: 36rpx;
}
.keyborad .van-field__control--disabled {color: #666 !important;
}