当前位置: 首页 > news >正文

微信小程序数字键盘(仿微信转账键盘)

微信小程序input自带数字输入键盘,不过是直接调用的系统键盘,无法个性化。

代码中使用使用了Vant WeappVant UI小程序版,这里就不介绍相关安装说明了,大家自行安装Vant Weapp。
在这里插入图片描述

json 用到的组件

{"usingComponents": {"van-cell": "@vant/weapp/cell/index","van-button": "@vant/weapp/button/index","van-popup": "@vant/weapp/popup/index","van-field": "@vant/weapp/field/index","van-row": "@vant/weapp/row/index","van-col": "@vant/weapp/col/index"}
}

wxml 结构

<van-cell title="分数" value="{{score || '点击打分'}}" bindtap="tapScore" /><!-- 打分键盘 -->
<van-popupshow="{{ keyboardShow }}"position="bottom"custom-style="height: 508rpx;"bind:close="onClose"
><view class="keyborad"><view class="input"><van-fieldvalue="{{ value }}"custom-style="border: 2prx solid #dcdee0"placeholder="请选择分数"disabled/></view><view class="number-keyboard"><van-row class="number" gutter="10"><van-colwx:for="{{number}}"wx:key="index"data-key="{{item}}"custom-class="number-item"span="{{item === 0 ? '16' : '8'}}"bindtap="tapNumber"><view class="number-item__key tap-key">{{item}}</view></van-col></van-row><view class="operation"><view class="del tap-key" bindtap="tapBksp"><image class="del-icon" src="/assets/backspace.png"></image></view><view class="confirm tap-key" bindtap="confirm">确定</view></view></view></view>
</van-popup>

js 内容

Page({data: {score: '',keyboardShow: false,value: '',number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.']},tapScore() {this.setData({keyboardShow: true})},onClose() {this.setData({keyboardShow: false})},// number点击tapNumber(e) {const { key } = e.currentTarget.datasetlet { value } = this.datavalue += key/*** 限制输入* 开头不能是小数点* 只能有一位小数点* 0开头只能跟小数点* 小数点后限制一位*/value = String(value).replace(/^\./g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^00$/, '0').replace(/^0(\d)/g, '$1').replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3')this.setData({value})},// 退格tapBksp() {let { value } = this.datavalue = String(value)value = value.substr(0, value.length - 1)this.setData({value})},// 确定confirm() {let { value } = this.datathis.setData({score: value,keyboardShow: false})},
})

wxss 样式


.keyborad .number-keyboard {display: flex;background-color: #ebedf0;padding: 20rpx 20rpx 0 20rpx;
}
.keyborad .number-keyboard .tap-key:active {opacity: 0.8;
}
.keyborad .number-keyboard .number {flex: 1;
}
.keyborad .number-keyboard .number .number-item {margin-bottom: 20rpx;
}
.keyborad .number-keyboard .number .number-item .number-item__key {background-color: #fff;text-align: center;height: 80rpx;line-height: 80rpx;border-radius: 8rpx;font-size: 32rpx;font-weight: 700;
}
.keyborad .number-keyboard .operation {width: 200rpx;display: flex;flex-direction: column;margin: 0 0 20rpx 20rpx;
}
.keyborad .number-keyboard .operation .del {height: 80rpx;text-align: center;margin-bottom: 20rpx;background-color: #fff;border-radius: 8rpx;display: flex;align-items: center;justify-content: center;
}
.keyborad .number-keyboard .operation .del .del-icon {width: 40rpx;height: 40rpx;
}
.keyborad .number-keyboard .operation .confirm {flex: 1;display: flex;align-items: center;justify-content: center;background-color: #04943f;border-radius: 8rpx;color: #fff;font-size: 36rpx;
}
.keyborad .van-field__control--disabled {color: #666 !important;
}

相关文章:

微信小程序数字键盘(仿微信转账键盘)

微信小程序input自带数字输入键盘&#xff0c;不过是直接调用的系统键盘&#xff0c;无法个性化。 代码中使用使用了Vant WeappVant UI小程序版&#xff0c;这里就不介绍相关安装说明了&#xff0c;大家自行安装Vant Weapp。 json 用到的组件 {"usingComponents": …...

mac电脑强大的解压缩软件BetterZip 5.3.4 for Mac中文版及betterzip怎么压缩

BetterZip 5.3.4 for Mac 是Mac系统平台上一款功能强大的文件解压缩软件&#xff0c;不必解压就能快速地检查压缩文档。它能执行文件之间的合并并提供密码。使用它&#xff0c;用户可以更快捷的向压缩文件中添加和删除文件。它支持包括zip、gz、bz、bz2、tar、tgz、tbz、rar、7…...

Llama 2 来袭 - 在 Hugging Face 上玩转它

&#x1f917; 宝子们可以戳 阅读原文 查看文中所有的外部链接哟&#xff01; 引言 今天&#xff0c;Meta 发布了 Llama 2&#xff0c;其包含了一系列最先进的开放大语言模型&#xff0c;我们很高兴能够将其全面集成入 Hugging Face&#xff0c;并全力支持其发布。Llama 2 的社…...

linux操作历史history定制

history记录 Linux中历史操作记录history是一个很有用的功能&#xff0c;有时忘记了&#xff0c;翻翻以前的命令&#xff0c;十分方便。 # 展示所有历史记录 history # 筛选历史记录 history | grep nginx # 清除全部记录 -c history -c # 指定删除某一行,15是行号 history -…...

微信小程序 wx.showModal

微信小程序--wx.showModal_海轰Pro的博客-CSDN博客...

Java开发中的分层开发和整洁架构

分层开发(横向拆分) 分层开发的概念: maven多模块开发项目管理.可以利用这种管理功能,实现一个项目的多层次模块开发–分层开发. 比如,当前项目HelloController依赖HelloService 这样做目的: 复杂开发过程.解耦(不调整依赖关系,无法解耦).分层开发(横向拆分)和纵向拆分的区别…...

Spring 多数据源方法级别注解实现

Spring框架提供了多种数据源管理方式&#xff0c;其中多数据源管理是其中之一。多数据源管理允许应用程序使用多个数据源&#xff0c;而不是只使用一个数据源&#xff0c;从而提高了应用程序的灵活性和可靠性。 多数据源管理的主要目的是让应用程序能够在不同的数据库之间切换&…...

Redis在云服务器上的安装与客户端连接配置

文章目录 Redis1.Redis的安装2.设置远程连接3.客户端连接3.1 客户端下载 Redis 1.Redis的安装 yum 安装 redis&#xff0c;使用以下命令&#xff0c;直接将 redis 安装到 linux 服务器&#xff1a; yum -y install redis 启动 redis使用以下命令&#xff0c;以后台运行方式启…...

​语言模型输出端共享Embedding的重新探索

©PaperWeekly 原创 作者 | 苏剑林 单位 | 科学空间 研究方向 | NLP、神经网络 预训练刚兴起时&#xff0c;在语言模型的输出端重用 Embedding 权重是很常见的操作&#xff0c;比如 BERT、第一版的 T5、早期的 GPT&#xff0c;都使用了这个操作&#xff0c;这是因为当模型…...

Spring中事务失效的8中场景

1. 数据库引擎不支持事务 这里以 MySQL为例&#xff0c;MyISAM引擎是不支持事务操作的&#xff0c;一般要支持事务都会使用InnoDB引擎&#xff0c;根据MySQL 的官方文档说明&#xff0c;从MySQL 5.5.5 开始的默认存储引擎是 InnoDB&#xff0c;之前默认的都是 MyISAM&#xff…...

安卓——转场动画

先创建一个名为anim的包 往里面写入两个xml页 为淡入淡出的效果 淡入效果 <alpha xmlns:android="http://schemas.android.com/apk/res/android"android:interpolator="@android:anim/accelerate_decelerate_interpolator"android:fromAlpha...

多位数码管动态扫描显示变化数据(数码管右移1)

/*----------------------------------------------- 内容&#xff1a;多位数码管分别显示不同数字&#xff0c;这种扫描显示方式成为动态扫描&#xff0c;并不停变化赋值 ------------------------------------------------*/ #include<reg52.h> //包含头文件&#xff0…...

充分了解java阻塞队列机制

多线程基础 1.阻塞队列1.1 什么是 阻塞队列1.2 阻塞队列的特点 1.3 阻塞队列常用方法1.3.1 抛出异常:add、remove、element1.3.2 返回结果但是不抛出异常offer、poll、peek1.3.3 阻塞put和take1.3.4 小结 1.4 常见的阻塞队列1.4.1 ArrayListBlockingQueue1.4.2 LinkedBlockingQ…...

安装使用LangChain时的报错解决

刚刚装了LangChain但是引入各种包都报错&#xff0c;原因貌似为 Python3.7 不支持 LangChain&#xff0c;需要开启一个新的Python3.10环境&#xff0c;再重新安装即可正常运行。 创建新的python环境 conda create -n new_env python3.10 重新安装 pip install langchain 这是当…...

【MySQL】库的操作

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《零基础入门MySQL》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录 &#x1f449;库…...

Java设计模式之工厂模式

什么是工厂模式 工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种将对象的实例化过程封装在工厂类中的方式。通过使用工厂模式&#xff…...

正则表达式-速成教程

正则表达式-速成教程 今天遇到一枚程序媛在群里吐槽&#xff0c;并附了截图&#xff1b;然后无意中看到她的一个正则与她的注释描述不一致&#xff0c;就提醒了一下。顺带着给了个速成教程&#xff0c;在这里把这个速成教程贴出来&#xff0c;一是为了自己备份&#xff1b;二是…...

C语言中的数组(详解)

C语言中的数组&#xff08;详解&#xff09; 一、一维数组1.一维数组的创建2.数组的初始化3.一维数组的使用4.一维数组在内存中的存储二、二维数组1.二维数组的创建2.二维数组的初始化3.二维数组的使用4.二维数组在内存中的存储三、数组越界四、数组作为函数参数1.冒泡排序2.数…...

【App管理04-Bug修正 Objective-C语言】

一、咱们刚才已经把这个给大家做完了吧 1.这个Label怎么显示到上面去了, 我们现在是把它加到我们的控制器的View里面吧 我们看一下这个坐标是怎么算的,来,我们找一个坐标, 咱们的坐标,是不是用这个View的frame,减的吧 来,咱们在这里,输出一下这个Frame,看一下吧 在…...

黑客自学笔记(网络安全)

一、黑客是什么 原是指热心于计算机技术&#xff0c;水平高超的电脑专家&#xff0c;尤其是程序设计人员。但后来&#xff0c;黑客一词已被用于泛指那些专门利用电脑网络搞破坏或者恶作剧的家伙。 二、学习黑客技术的原因 其实&#xff0c;网络信息空间安全已经成为海陆空之…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...