微信小程序自定义键盘|仿微信支付数字键盘

实现效果

简介

点击金额模块区域，获取焦点。
点击非金额模块区域，失去焦点且隐藏支付键盘。
支持小数点两位数字。
付款金额默认置灰，点击付款按钮无效。当输入付款金额后，付款按钮还原正常状态。
删除按钮可以通过icon图标或者图片来替换，达到和微信数字支付键盘一样的效果。
有更合适的实现方式或者代码不合理的地方，欢迎留言交流

实现代码

// index.wxml<view class="pay-container" catchtap="handleHiddenKey"><view class="pay-header"><view>付款给企业<view class="company-name">(深圳****公司)</view></view></view><view class="pay-main"><view class="pay-money-title">付款金额</view><view class="pay-input-wrapper" catchtap="handleShowKey"><text class="pay-icon">￥</text><view hidden="{{!payMoney}}" class="pay-money">{{ payMoney }}</view><view hidden="{{keyHidden}}" class="pay-cursor"></view></view></view>
</view><view class="keyboard {{ !keyHidden && 'hind_box' }}"><view class="key-box"><view class="number-box clearfix"><viewwx:for="{{KeyboardKeys}}"wx:key="*this"data-key="{{item}}"class="key {{ index === 9 ? 'key-zero' : ''}}"hover-class="number-box-hover"catchtap="handleKey">{{item}}</view></view><view class="btn-box"><!-- TODO: 需要替换成删除icon --><view class="key" hover-class="number-box-hover" data-key="X" catchtap="handleKey">X</view><view class="key pay_btn {{payMoney ? '' : 'pay-btn-display'}}" hover-class="pay-btn-hover" catchtap="handlePay">付款</view></view></view>
</view>

// index.wxss
/* pages/pay/index.wxss */
.clearfix::after {content: '';display: table;clear: both;
}
.pay-container {padding: 0 62rpx;height: 100%;
}
.pay-header {height: 260rpx;display: flex;align-items: center;
}
.company-name {font-size: 24rpx;margin-top: 12rpx;color: #909399;
}
.pay-money-title {font-size: 28rpx;
}
.pay-input-wrapper {margin-top: 12rpx;position: relative;display: flex;height: 100rpx;line-height: 100rpx;align-items: center;
}
.pay-input-wrapper:after {content: " ";position: absolute;left: -50%;right: -50%;bottom: 0;border-bottom: 1px solid rgb(235, 237, 240);transform: scaleX(.5);
}
.pay-icon,
.pay-money {font-size: 72rpx;font-weight: bold;
}
.pay-money {margin-right: 4rpx;
}
.pay-cursor {width: 6rpx;height: 66rpx;background: #1AAD19;border-radius: 6rpx;animation: twinkling 1.5s infinite;
}@keyframes twinkling {0% {opacity: 0;}90% {opacity: .8;}100% {opacity: 1;}
}
.keyboard {position: fixed;left: 0;right: 0;bottom: 0;z-index: 999;height: 0;background: #f7f7f7;transition: height 0.3s;
}
.hind_box {height: 456rpx;
}.key-box {display: flex;padding-left: 16rpx;padding-bottom: 16rpx;padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}
.number-box {flex: 3;
}
.number-box .key {float: left;margin: 16rpx 16rpx 0 0;width: calc(100% / 3 - 16rpx);height: 90rpx;border-radius: 10rpx;line-height: 90rpx;text-align: center;font-size: 40rpx;font-weight: bold;background-color: #fff;
}
.number-box .key.key-zero {width: calc((100% / 3) * 2 - 16rpx);
}
.keyboard .number-box-hover {/* 临时定义颜色 */background-color: #e1e1e1 !important;
}
.btn-box {flex: 1;
}
.btn-box .key {margin: 16rpx 16rpx 0 0;height: 90rpx;border-radius: 10rpx;line-height: 90rpx;text-align: center;font-size: 40rpx;font-weight: bold;background-color: #fff;
}.btn-box .pay_btn {height: 298rpx;line-height: 298rpx;font-weight: normal;background-color: #1AAD19;color: #fff;font-size: 32rpx;
}
.btn-box .pay_btn.pay-btn-display{background-color: #9ED99D !important;}
.btn-box .pay_btn.pay-btn-hover{background-color: #179B16;}

// index.js
Page({/*** 页面的初始数据*/data: {KeyboardKeys: [1, 2, 3 , 4, 5, 6, 7, 8, 9, 0,'.'],payMoney: '', // 支付金额keyHidden: false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},// 隐藏键盘handleHiddenKey() {this.setData({keyHidden: true})},// 显示键盘handleShowKey() {this.setData({keyHidden: false})},// 键盘输入handleKey(e) {const that = thisconst { key } = e.currentTarget.datasetconst { payMoney } = this.data// 删除金额if (key === 'X') {if (payMoney !== '') {const money = payMoney.slice(0, payMoney.length - 1)that.setData({payMoney: money})}} else {// 添加金额const money = payMoney + keyconsole.log(/^(\d+\.?\d{0,2})$/.test(money), money, 'money')if (/^(\d+\.?\d{0,2})$/.test(money)) {that.setData({payMoney: money})}}},// 支付handlePay() {const { payMoney } = this.dataif (payMoney === '') returnconsole.log(Number(payMoney), '付款')}})

微信小程序自定义键盘|仿微信支付数字键盘相关推荐

微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
微信小程序开发之——仿微信视频录制上传
一仿微信视频录制效果二业务说明视频录制前,只显示取消和视频录制按钮录制开始后,只显示视频录制按钮,并且上方显示时间.录制按钮显示录制进度录制完成后,显示重拍.取消.上传按钮录制完成后,点 ...
小程序自定义组件仿微信联系人可导航字母序排列数据列表
https://blog.csdn.net/Honiler/article/details/82929111
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义类似微信联系人组件
微信小程序自定义联系人弹窗在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序自定义组件(二)
微信小程序自定义组件 ps 由于作业部落貌似出了点问题,耽误了点时间,找了一个stackedit.io准备写.无奈,这是要自己建编辑器的节奏啊.没有一个能靠的注为何存在组件组件间的关系使用rel ...

微信小程序自定义键盘|仿微信支付数字键盘

实现效果

简介

实现代码

微信小程序自定义键盘|仿微信支付数字键盘相关推荐

最新文章

热门文章