【uniapp】仿微信支付界面

Komorebi゛

已于 2023-10-31 16:27:37 修改

阅读量1.2k

点赞数 1

分类专栏： CSS JavaScript 文章标签： uni-app

于 2023-10-26 09:14:35 首次发布

本文链接：https://blog.csdn.net/Komorebi_00/article/details/134040709

版权

该博客展示了如何使用uni-app框架来仿造微信支付的界面效果，包括展示仿制的支付界面截图以及提供完整的代码实现。

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

效果图

在这里插入图片描述

完整代码

<template>
    <view class="my-pay-page">
        <view :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="nav-container">
            <view class="nav-back" @click="goBack">
                <view>取消</view>
            </view>
            <view class="nav-title">付款</view>
        </view>
        <view class="main-container" :style="computedMainHeight">
            <view class="center-container">
                <!-- 省略······ -->
                <view class="pay-wrap">
                    <view class="gray-text">金额</view>
                    <view class="money-box">
                        <text class="unit">￥</text>
                        <text class="money">{
  { payMoney }}</text>
                        <text class="mark"></text>
                    </view>
                    <view class="gray-text">付款方式</view>
                    <view class="flex-justify">
                        <image class="left-img" src="~@/static/images/myImgs/sfb@2x.png" alt="" />
                        <view class="left-text">支付宝</view>
                        <image class=