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

效果图

代码:

	<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

.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;}}}

一些公共样式

	.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;}