uniapp 自定义类微信支付键盘 (微信小程序)

效果图

代码:

javascript 复制代码
	<view class="popups popupsB">
						<view class="appreciatePrice">
							<view class="appreciatePriceTitle">
								赞赏金额
							</view>
							<view class="appreciatePriceInput flex ac">
								¥<input type="text" disabled class="appreciatePriceInputs" />
							</view>
							<view class="minAppreciatePrice">
								最低赞赏¥
							</view>
						</view>
						<view class="">
							<view class="keyboard flex ac jsb">
								<view class="keyboardLeft">
									<!-- 19数字 -->
									<view class="flex flexwrap">
										<view class="keyboardLeftNumber flex jc ac" v-for="(item,index) in keyboard"
											:key="index">
											{{item}}
										</view>
									</view>
									<!-- 0和点的按键 -->
									<view class="keyboardLeftZooDrop flex jsb ac">
										<view class="keyboardLeftZoo  flex jc ac">
											0
										</view>
										<view class="keyboardLeftDrop  flex jc ac">
											.
										</view>
									</view>
								</view>
								<!-- 右边确定和删除 -->
								<view class="keyboardRight">
									<view class="keyboardRightDel  flex jc ac">
										<u-icon name="close" color="#232323" size="20"></u-icon>
									</view>
									<view class="keyboardRightConfirm  flex jc ac">
										确定
									</view>
								</view>
							</view>
							<view class="liness">

							</view>
						</view>

					</view>

css

css 复制代码
.popups {
		height: 55vh;
		padding: 0rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
	}

	.popupsB {
		padding: 0 !important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.appreciatePrice {
			padding: 30rpx;
			box-sizing: border-box;

			.appreciatePriceTitle {
				font-size: 24rpx;
				// padding-left: 10rpx;
				// box-sizing: border-box;
			}

			.appreciatePriceInput {
				padding: 30rpx 0rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f5f5f5;
				font-size: 50rpx;
				font-weight: bold;

				.appreciatePriceInputs {
					margin-left: 10rpx;
				}
			}

			.minAppreciatePrice {
				color: #999;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
		}

	}

	.keyboard {
		padding: 20rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 8rpx;

		.keyboardLeft {
			width: 480rpx;
			height: 380rpx;
			// background: red;

			.keyboardLeftNumber {
				width: 146.66rpx;
				height: 80rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 8rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

			}

			.keyboardLeftNumber:nth-child(3n+3) {
				margin-right: 0 !important;
			}

			.keyboardLeftZooDrop {
				.keyboardLeftZoo {
					width: 313.33rpx;
					background: #fff;
					font-size: 30rpx;
					font-weight: bold;
					border-radius: 8rpx;
					height: 80rpx;
				}

				.keyboardLeftDrop {
					width: 146.66rpx;
					background: #fff;
					font-size: 30rpx;
					font-weight: bold;
					border-radius: 8rpx;
					height: 80rpx;
				}
			}

		}

		.keyboardRight {
			width: 150rpx;
			height: 380rpx;

			// background: blue;
			.keyboardRightDel {
				width: 146.66rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 8rpx;
				height: 80rpx;
			}

			.keyboardRightConfirm {
				width: 146.66rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 8rpx;
				height: 272rpx;
				background: #4ac163;
				margin-top: 20rpx;
				color: #fff;
			}

			.keyboardRightConfirmNo {
				opacity: 0.1;
			}
		}
	}

一些公共样式

css 复制代码
	.flex{
		display: flex;
	}
	.jc{
		justify-content: center;
	}
	.ac{
		align-items: center;
	}
	.w100h100{
		width: 100%;
		height: 100%;
	}
	.jsb{
		justify-content: space-between;
	}
	.flexwrap{
		flex-wrap: wrap;
	}
	.me-text-beyond-multi2{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.je{
		justify-content: flex-end;
	}
	.jsa{
		justify-content: space-around;
	}

js

css 复制代码
keyboard: [1, 2, 3, 4, 5, 6, 7, 8, 9],

并未做任何事件,如需请自行添加。

相关推荐
2501_915106323 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
巨神峰SEO6 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰7 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐7 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐7 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
weixin_lynhgworld11 小时前
剧本杀小程序系统开发:内容生态与商业模式的双轮驱动
大数据·小程序
博客zhu虎康11 小时前
微信小程序报错 ubepected character `的style换行问题
微信小程序
计算机徐师兄11 小时前
Java基于SpringBoot的农场管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·农场管理系统小程序·java农场管理系统小程序·java农场管理系统微信小程序·农场管理微信小程序
00后程序员张11 小时前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
草字11 小时前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app