仿微信支付转账页面

一、效果

宁可累死自己，也要卷死他们。大家好。我是小卷

二、解析说明

此页面可分分为4部分
1 返回箭头
2 头像和昵称
3 金额输入
4 输入的键盘

三、代码展示

3.1、wxml

<!--返回按钮-->
<view style="margin-top: {{CustomBar*5/8}}px;margin-left: 10px;color: black;">
    <view class="cuIcon-back" bindtap="backPage"></view>
</view>
<!--头像与昵称-->
<view style="text-align: center;">
    <image class="avatar" src="/img/base/avatar.jpg"></image>
    <view class="nickName">大小姐</view>
</view>

<view class="page_box">
    <!--金额-->
    <view class="input_view">
        <text class="title">金额</text>
        <view class="input_box">
            <text class="input_label">￥</text>
            <!--输入内容-->
            <text class="content" wx:if="{{content}}">{{content}}</text>
            <view class="className" wx:if="{{keyShow}}"></view>
        </view>
        <view style="color:darkblue;margin-top: 40rpx;">添加转账说明</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 delete' catchtap='keyTap' data-keys='<'>
                    <text class="cuIcon-del"></text>
                </view>
                <view class="keys pay_btn" catchtap='payTap'>转账</view>
            </view>
        </view>
    </view>
</view>

提示：返回箭头 cuIcon-back和去除cuIcon-del，用到iconfont
头像路径可以自行替换呢

3.2、wxss

page {
    background-color:#EDEDED;
}
/*头像*/
.avatar{
    width: 80rpx;
    height: 80rpx; 
    border-radius: 10rpx;
}
/*昵称*/
.nickName{
    margin-top: 20rpx;
    font-weight: bold;
}
/*整体*/
.page_box {
    margin-top: 50rpx;
    width: 100%;
    height: auto;
    background-color: #fff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    overflow: hidden;
}

/*1 输入金额整体*/
.input_view{
    width: 100%;
    height: 1050rpx;
    padding: 30rpx 60rpx 40rpx 60rpx;
    box-sizing: border-box;
}
/*1.1 金额名称*/
.title {
    display: block;
    font-size: 24rpx;
    color: #000;
    padding-left: 10rpx;
}
/*1.2 输入框*/
.input_box{
    display: flex;
    padding: 20rpx 0;
    height: 120rpx;
    border-bottom: 1px solid #efefef;
}
/*1.3 ￥样式*/
.input_label{
    font-size: 60rpx;
    font-weight: bold;
    margin-right: 5rpx;
}
/*1.4 金额*/
.content{
    font-size: 60rpx;
    font-weight: bold;
    line-height: 90rpx;
    margin-top: 8rpx;
}
/*1.5 光标闪烁*/
.className {
    width: 4rpx;
    height: 80rpx;
    background: #43ad3f;
    margin-top: 15rpx;
    animation: twinkling 1s infinite;
}
/*1.6 光标动作*/
.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}
/*1.7 动作效果*/
@keyframes twinkling {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*2 键盘*/
.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.delete{
    font-size: 60rpx;
}
.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;
}

3.3、js

const app = getApp();
Page({
    data: {
        CustomBar: app.globalData.CustomBar,
        keyShow: true, //默认显示键盘
        KeyboardKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '·'],
        content: ''
    },
    //点击界面键盘消失
    hindKeyboard() {
        this.setData({
            keyShow: false
        });
    },
    //点击输入框，键盘显示
    showKeyboard() {
        this.setData({
            keyShow: true
        });
    },

    //按钮
    keyTap(e) {
        wx.vibrateShort({
          type: 'light',
        })
        let keys = e.currentTarget.dataset.keys;
        let content = this.data.content;
        let len = content.length;

        switch (keys) {
            //点击小数点
            case '·':
                //如果字符串里有小数点了，则不能继续输入小数点，且控制最多可输入10个字符串
                if (len < 11 && content.indexOf('.') == -1) {
                    //如果小数点是第一个输入，那么在字符串前面补上一个0，让其变成0.
                    if (content.length < 1) {
                        content = '0.';
                    } else { //如果不是第一个输入小数点，那么直接在字符串里加上小数点
                        content += '.';
                    }
                }
                break;
            case 0:
                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: content
        });
    },

    // 付款
    payTap() {
        this.hindKeyboard();
        let content=this.data.content;
        if(content==''){
            wx.showToast({
              title: '请先填写金额',
              icon:'error'
            })
            setTimeout(() => {
                this.showKeyboard();
            }, 500)
        }
        console.log(this.data.content)
    }

})

其中 CustomBar 获取屏幕导航栏高度

大家测试一下。如果效果和微信支付转账一样。麻烦在评论留言 一模一样。
希望大家。点赞👍。收藏⭐。最后关注。