uniapp:小程序数字键盘功能样式实现

最新推荐文章于 2024-04-08 11:43:28 发布
最新推荐文章于 2024-04-08 11:43:28 发布
阅读量934 收藏 7
点赞数 10
分类专栏： uniapp 文章标签： uniapp vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65069237/article/details/136568258
版权

代码如下：

<template>
	<view>
		<view>
			<view class="money-input">
				<view class="input-container" @click="toggleBox">
					<view class="input-wrapper">
						<view class="input-iconone">
							<image src="https://picture-warehouseone.oss-cn-beijing.aliyuncs.com/rmb.png" mode="aspectFit"
								style="width: 60rpx; height: 60rpx;"></image>
						</view>
						<view
							style="width: auto; height: 100%;line-height: 156rpx; padding-left: 80rpx; font-size: 80rpx; color: #333;">
							{{nums}}
						</view>
						<view class="input-icon" :class="{active: showBox}"></view>
					</view>
				</view>
			</view>

			<view class="numbers">
				<view style=" display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; width: 72%; height: auto;">
					<view @click="changeNums(item,index)" :class="item.class" :style="getListitemstyle(index)"
						v-for="(item,index) in numbers">
						{{item.text}}
					</view>
				</view>
				<view style="width: 28%; height: auto; display: flex; flex-flow: column wrap; ">
					<view @click="jianshao()" class="oner" :style="styleos">
						<image src="https://picture-warehouseone.oss-cn-beijing.aliyuncs.com/jianshao.png" mode="aspectFit"
							style="width: 50rpx; height: 50rpx;"></image>
							
					</view>
					<view class="onerplus" @click="ok()" :style="stylelv">
						确认
					</view>
				</view>
			</view>

		</view>
         
		 <view>{{sets}}</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				active: {
					background: ' #f2f2f2',
					color: '#d4d4d4'
				}, //这是确定按钮的样式
				styleos: {
					background: '#ffffff' //这是确认的初始颜色
				},
				stylelv: {
					background: '#9cd7b7' //确认按钮颜色初始
				},
				nums: '',
				sets:this.set,//获取set中编辑数据
				isimit: false, //判断备注是否超过了最大限制标志位
				showBox: false, //是否显示‘|’		
				activeIndex: 0, //默认选中索引
				sumindex: -1, //数字键盘索引
				numbers: [

					{
						text: '1',
						class: 'oner',
						background: '#ffffff'

					},
					{
						text: '2',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '3',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '4',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '5',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '6',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '7',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '8',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '9',
						class: 'oner',
						background: '#ffffff'
					},
					{
						text: '0',
						class: 'big',
						background: '#ffffff'
					},
					{
						text: '.',
						class: 'oner',
						background: '#ffffff'
					},


				]
			}
		},
		created() {
			
		},
		methods: {

			comfors() {
				if (this.valuemark) {
					this.active.background = "#33955f"
					setTimeout(() => {
						this.active.background = "#3eb575"
						this.showremark = false
					}, 150)

				}
			},
			input(e) {
				console.log('输入内容：', e);
				// console.log('this.index.lenth', this.value.length)
				this.valuemark = e
				if (this.valuemark) {
					this.active.background = '#3eb575'
					this.active.color = '#ffffff'
				} else {
					this.active.background = '#f2f2f2'
					this.active.color = '#d4d4d4'
				}
			},
			ok() {
					this.stylelv.background = '#3bab6f'
					setTimeout(() => {
						this.stylelv.background = '#9cd7b7'
					}, 150)
			},
			jianshao() {
				this.styleos.background = '#f7f7f7'
				setTimeout(() => {
					this.styleos.background = '#ffffff'
				}, 150)
				if (this.nums) {
					this.nums = this.nums.substring(0, this.nums.length - 1)
				}
			},
			changeNums(item, index) {
				this.numbers.forEach((item, idx) => {
					if (idx === index) {
						item.background = '#f7f7f7';
						setTimeout(() => {
							item.background = '#ffffff';
						}, 150)
					}
				});

				this.sumindex = index
				// console.log('this.sumindex', this.sumindex)
				if (item.text == '.') {
					console.log(this.nums.indexOf(".") != -1)

					if (this.nums.indexOf(".") != -1 || this.nums.length == 0) {
						return false
					}

				}
				if (this.nums.split('.') && this.nums.split('.')[1]) {
					if (this.nums.split('.')[1].length >= 2) {
						return false
					}
				}
				// this.nums.length
				console.log('this.nums.length',this.nums.length)
				
				this.nums = this.nums + item.text
				if(this.nums.length >6){
					this.nums = this.nums.slice(0,6)
					uni.showToast({
						title: '最多只能输入6位数哦',
						icon: 'none'
					});
					return;
				}
			},

			getListitemstyle(index) {
				return {
					background: this.numbers[index].background
				};
			},


			toggleBox() {
				this.showBox = true //点击后输入框出现“|”每隔一段时间闪动
			},
		},
	}
</script>

<style lang="scss" scoped>
	.Classify {
		width: 100%;
		display: flex;
		height: 120rpx;
		margin-top: 10rpx;
		padding-left: 20rpx;
		padding-right: 30rpx;
		align-items: center;
		margin-bottom: -12rpx;
		justify-self: flex-start;

	}

	.Expenditure {
		width: auto;
		height: 60rpx;
		color: #c7c7c7;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #f7f7f7;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.Expendituretime {
		width: auto;
		color: black;
		display: flex;
		height: 60rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		margin-left: 32rpx;
		align-items: center;
		border-radius: 10rpx;
		background-color: #f7f7f7;
		justify-content: space-evenly;
		padding: 0rpx 15rpx 0rpx 20rpx;

	}

	.Expenditurelv {
		width: auto;
		height: 60rpx;
		color: #3eb575;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #ebf7f1;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.ExpenditureH {
		width: auto;
		height: 60rpx;
		color: #f5c53a;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #fdf8eb;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.ExpenditureL {
		width: auto;
		height: 60rpx;
		color: #8c8bc3;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		background-color: #f1f3f6;
		padding: 0rpx 20rpx 0rpx 20rpx;

	}

	.money-input {
		width: 100%;
		height: 150rpx;
		padding: 0 40rpx 0 40rpx;

	}

	.Type {
		width: 100%;
		height: 154px;
		display: flex;
		margin-top: 20rpx;
		align-items: center;
		flex-flow: row wrap;
		justify-content: flex-start;
		overflow-y: auto;

	}

	.Type-box {
		display: flex;
		width: 120rpx;
		height: 140rpx;
		align-items: center;
		flex-flow: column wrap;
		justify-content: center;
		margin: 0 0rpx 10rpx 5rpx;

	}

	.Typeboxactive {
		display: flex;
		width: 120rpx;
		height: 140rpx;
		align-items: center;
		flex-flow: column wrap;
		justify-content: center;
		margin: 0 0rpx 10rpx 5rpx;
		background-color: #cbcbcb;
	}

	.inctiveclass {
		width: 80rpx;
		display: flex;
		height: 80rpx;
		font-size: 22rpx;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background-color: #e7e7e7;

	}

	.activeclass {
		width: 80rpx;
		display: flex;
		height: 80rpx;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
		background-color: #3eb575;

	}

	.numbers {
		width: 100%;
		display: flex;
		height: 480rpx;
		margin-top: 10rpx;
		background-color: #fafafa;
		justify-content: flex-start;

	}

	.remark {
		width: 100%;
		color: #50648a;
		height: 100rpx;
		font-size: 32rpx;
		padding: 20rpx 0 0 30rpx;

	}

	.oner {
		display: flex;
		width: 165rpx;
		height: 100rpx;
		font-size: 34rpx;
		font-weight: bold;
		align-items: center;
		border-radius: 10rpx;
		justify-content: center;
		margin: 15rpx auto 5rpx;
		background-color: #ffffff;

	}

	.onerplus {
		display: flex;
		width: 165rpx;
		color: #ffffff;
		height: 338rpx;
		font-size: 34rpx;
		font-weight: bold;
		align-items: center;
		border-radius: 10rpx;
		justify-content: center;
		margin: 15rpx auto 5rpx;
		background-color: #9cd7b7;

	}

	.big {
		display: flex;
		width: 342rpx;
		height: 100rpx;
		font-size: 34rpx;
		font-weight: bold;
		align-items: center;
		border-radius: 10rpx;
		margin: 15rpx auto 5rpx;
		justify-content: center;
		background-color: #ffffff;

	}

	.input-container {
		position: relative;
		width: 100%;
		height: 156rpx;
		display: flex;
	}

	.input-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		border-bottom: 1px solid #ccc;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.input-icon {
		height: 106rpx;
		width: 5rpx;
		background-color: #cbcbcb;
		display: none;
	}

	.active {
		display: block;
		animation: blink 1s infinite; //点击后|出现
	}

	@keyframes blink {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.input-iconone {
		position: absolute;
		top: 50%;
		left: 2rpx;
		transform: translateY(-50%);
		color: #666;
	}

	.input-field {
		width: 100%;
		height: 100%;
		line-height: 156rpx;
		padding-left: 80rpx;
		font-size: 80rpx;
		color: #333;
	}

	.remarks {
		width: 68px;
		height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.box-text {
		display: flex;
		justify-content: center;
		color: #c7c7c7;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.box-ative {
		display: flex;
		justify-content: center;
		color: #000000;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;
		height: 40rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.top {
		position: relative;
		width: 100%;
		height: 30%;
	}

	.window {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
	}

	.center {
		position: relative;
		width: 100%;
		height: 30%;
		display: flex;
		padding: 0 30rpx 0 30rpx;
		justify-content: center;
		align-items: center;
	}

	.bottom {
		width: 100%;
		height: 40%;
		position: relative;
	}

	.comfors {
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
		width: 380rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: #f2f2f2;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #d4d4d4;
		border: 1rpx solid #f2f2f2;
	}

	.Record-remarks-number-of-words {
		position: absolute;
		left: 30rpx;
		bottom: -20rpx;
		color: #d4d4d4;
	}
</style>

在uniapp中直接运行即可。运行效果：

荀鼠不是鼠
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
高级前端工程师
05-13 9642
uniapp键盘无法输入小数点符号，uniapp键盘没有小数点，uniapp手机软键盘没有小数点，uniapp input设为number时键盘没有小数点，uniapp小程序调取数字键盘没有小数点解决办法，uniapp手机网页h5 安卓app 微信小程序 nvue解决键盘无法输入小数点的问题，uniapp苹果ios键盘上没小数点.怎么办，uniapp input number无法输入小数点，uniapp IOS数字键盘没有小数点，uniapp数字键盘为什么没有小数点，uniapp小程序app h5 inpu
keyboard:小程序模拟键盘组件
05-01
keyboard 小程序模拟键盘组件 模拟键盘操作 优点： 推荐金额快捷选择 可自助选择充值 遇到的问题： 组件看起来不难，但是要注意的小细节好多。 输入小数点后，不能在输入第二个小数点。 小数点后两位朝外，再输入无效。 推荐金额和自助充值切换时要相互重置。 为何要写此组件？ 小程序原生的<input type="digit" placeholder="带小数点的数字键盘"/>不够灵活，不能自由的操纵数字面板！！用的不爽！！ 下面是效果gif：
uniapp 自定义数字键盘
weixin_46997610的博客
07-05 1529
uniapp 自定义 数字键盘
uniapp小程序、uniappH5自定义快捷输入键盘
最新发布
mengmeng12138的博客
04-08 496
此键盘根据其他大佬写好的自定义键盘的基础上，按本人所需需求进行修改而来。
uniapp自建数字键盘
qq_40110189的博客
07-03 5566
uniapp自建数字键盘插件
【uniapp】uniapp实现input输入显示数字键盘：
SunPeng的博客
10-29 3276
【uniapp】uniapp实现input输入显示数字键盘：
微信小程序数字键盘（仿微信转账键盘）
ZionHH的博客
07-26 3088
微信小程序数字键盘（仿微信转账键盘）
使用uniapp在列表渲染的数字键盘中给每个键位写入点击事件点击改变颜色0.15s后有还原成原来的颜色且不使用:class
m0_65069237的博客
09-14 409
再写数字键盘的时候遇到了一个问题就是我已经通过：calss渲染了不同键位的样式，但是点击键位为了和用户有交互，那么点击时改变颜色就显得比较重要了，但是以及使用了:class了在使用一次改变样式的话就是报错，所以这次改变键位样式且0.15s恢复的这个功能将不使用：class来实现使用:style来实现。使用uni-app编写一个列表渲染，其中包含三个元素，并实现点击其中一个元素时改变其颜色样式，同时不使用。主要是实现不使用：class的情况下也能实现盒子样式的改变。指令渲染列表，并为每个元素绑定单击事件。
使用 UniApp 实现小程序的微信登录功能
10-15
主要介绍了使用 UniApp 实现小程序的微信登录功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
uniapp 微信小程序tabbar凸起的显示
08-25
uniapp 微信小程序tabbar凸起的显示，不闪烁。
uniapp 微信小程序 时间段选择组件
07-24
uniapp 微信小程序 时间段选择组件
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp微信小程序实现网易云音乐
07-28
使用uniapp实现的仿网易云音乐的微信小程序，可正常在微信开发者工具中运行，音乐播放，页面展示，跳转等功能
uniapp踩坑之项目：uniapp数字键盘组件—APP端
意初的博客
11-03 741
uniapp数字键盘组件—APP端/在components文件夹创建digitKeyboard文件夹，再创建digitKeyboard.vue。// 数字键盘组件 在项目里main.js中配置如下代码。//main.js全局引入。
小程序开发中的虚拟数字键盘问题及解决方案
weixin_63929524的博客
05-04 1271
在 iOS 平台中，我们使用 wx.createSelectorQuery 获取输入框位置信息，并计算出距离键盘顶部的距离，以及输入框与键盘底部之间的距离差。如果差值小于 0，则表示输入框被键盘遮挡，此时我们可以使用 wx.createSelectorQuery 获取滚动视图信息，并根据需要手动调整输入框位置。而在 Android 平台中，则直接计算出输入框与键盘底部之间的距离差，如果差值小于 0，则为输入框添加一个底部距离即可。
微信小程序--input 小数点 键盘
qq_48957847的博客
08-23 2949
个人问题记录
微信小程序自定义键盘|仿微信支付数字键盘
Luo的博客
02-24 4253
实现效果 简介 点击金额模块区域，获取焦点。 点击非金额模块区域，失去焦点且隐藏支付键盘。 支持小数点两位数字。 付款金额默认置灰，点击付款按钮无效。当输入付款金额后，付款按钮还原正常状态。 删除按钮可以通过icon图标或者图片来替换，达到和微信数字支付键盘一样的效果。 有更合适的实现方式或者代码不合理的地方，欢迎留言交流 实现代码 // index.wxml <view class="pay-container" catchtap="handleHiddenKey"> <
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-09 1158
uniapp自定义密码输入键盘-数字键盘效果demoUI方法二
uni-app封装自定义支付密码键盘组件及使用方法（附效果图）
青衫折扇的博客
04-22 1279
先看一下效果吧 可以扫码下方小程序自行下载源码
uniapp微信小程序，怎样实现实现蓝牙打印功能
06-02
要在uniapp微信小程序中实现蓝牙打印功能，需要进行以下步骤： 1. 在小程序中添加蓝牙权限 在小程序的app.json文件中添加以下代码： ``` "mp-weixin": { "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" }, "scope.record": { "desc": "你的录音将用于小程序语音识别" }, "scope.writePhotosAlbum": { "desc": "你的图片将保存在相册中" }, "scope.bluetooth": { "desc": "你的蓝牙将用于小程序蓝牙打印" } } } ``` 2. 连接蓝牙打印机 使用wx.openBluetoothAdapter()函数打开蓝牙适配器，并使用wx.startBluetoothDevicesDiscovery()函数查找蓝牙设备。找到设备后，使用wx.createBLEConnection()函数连接设备。 3. 发送打印指令 连接成功后，可以使用wx.writeBLECharacteristicValue()函数发送打印指令。打印指令的格式需要根据蓝牙打印机的型号来确定。 4. 断开蓝牙连接 使用wx.closeBLEConnection()函数断开蓝牙连接。 以上就是在uniapp微信小程序中实现蓝牙打印功能的步骤。需要注意的是，不同型号的蓝牙打印机可能需要不同的打印指令格式，需要根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值