小程序仿微信支付数字键盘,微信支付数字键盘
前段时间在一个小程序中需要写个支付页面,刚开始用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)
}
})
到这里就结束了,使用的话微调一下样式问题应该不大
注:光标暂时不能移动,有能力的话自己研究一下