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

最新推荐文章于 2025-03-19 11:36:53 发布

Martin-Luo

最新推荐文章于 2025-03-19 11:36:53 发布

阅读量4.7k

点赞数 3

分类专栏：微信小程序 JavaScript html5+CSS3 文章标签：微信小程序微信小程序

本文链接：https://blog.csdn.net/Dragon_Luo/article/details/123109188

版权

本文介绍了一个实现微信支付键盘效果的示例，包括点击金额区域获取焦点，非金额区域失去焦点并隐藏键盘，支持小数点后两位数字输入，以及付款金额的验证和付款按钮的状态控制。此外，还提供了键盘样式和删除键的实现细节，并邀请读者分享更优的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

在这里插入图片描述

简介

点击金额模块区域，获取焦点。
点击非金额模块区域，失去焦点且隐藏支付键盘。
支持小数点两位数字。
付款金额默认置灰，点击付款按钮无效。当输入付款金额后，付款按钮还原正常状态。
删除按钮可以通过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

最低0.47元/天解锁文章