微信小程序 - 自定义计数器 - 优化(键盘输入校验)

        微信小程序通过自定义组件,实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式,更新计数器的值,并修改相关联的其它变量。通过提升用户体验,对计数器进行优化设计,使用户操作更加便捷和直观。

        计数器的实现主要涉及到几个关键部分,上一篇已重点讲过,该篇将讲述一下中间input输入框值变化后的校验操作。

        由于该篇是接上一篇继续完善和优化,所以建议先了解上一篇后,再来看此篇内容。地址:微信小程序 - 自定义计数器-CSDN博客

        如上图中,增加、减小按钮操作已限定了其值范围;但是通过小键盘输入内容后,发现值并不正规或者已超出了其限定范围,所以需要增加监听input输入框的内容变化,对其值进行校验和处理。

一、bindinput事件监听

        首页需要在Counter计数器中绑定监听事件,bindinput事件会在每次输入一个数字、字母或符号时执行一次。index.wxml代码如下:

<view class="counter-wrap"><button class="btn mul" disabled="{{isDisabledMul}}" bind:tap="mulEvent">-</button><input type="number" value="{{value}}" class="number" bindinput="inputEvent" /><button class="btn add" disabled="{{isDisabledAdd}}" bind:tap="addEvent">+</button>
</view>

        index.js中添加inputEvent监听事件,代码如下:

// components/Counter/index.js
Component({/*** 组件的属性列表*/properties: {// 值value: {type: Number,value: 0},// 目标keytarget: {type: String,value: ''},// 最小值min: {type: Number,value: null},// 最大值max: {type: Number,value: null}},/*** 组件的初始数据*/data: {isDisabledAdd: false,     // 是否禁用 加 按钮isDisabledMul: false,     // 是否禁用 减 按钮},/*** 组件的方法列表*/methods: {// 略...    // 输入后 监听事件inputEvent(e){console.log(e.detail.value);}}
})

        如代码所示,inputEvent监听事件中,是通过e.detail.value获取修改后的新内容。

二、防抖操作

        每输入一个数字,inputEvent函数则会被执行一次,此时用户内容可能并没有输入完整,所以这里增加一个计时器,当用户最后一次输入内容,再执行数值校验。代码如下:

// components/Counter/index.js
Component({/*** 组件的属性列表*/properties: {// 值value: {type: Number,value: 0},// 目标keytarget: {type: String,value: ''},// 最小值min: {type: Number,value: null},// 最大值max: {type: Number,value: null}},/*** 组件的初始数据*/data: {isDisabledAdd: false,     // 是否禁用 加 按钮isDisabledMul: false,     // 是否禁用 减 按钮},/*** 组件的方法列表*/methods: {// 略...// 输入后  监听事件inputEvent(e){clearTimeout(this.inputHandle);// 开始计时this.inputHandle = setTimeout((value) => {}, 800);}}
})

        在每次执行inputEvent函数时,先清除上一次计时器,这样就只会执行最后一次计时器的回调函数。

三、形参传递

        如图所示,键盘输入的内容会出现很多种情况,"0232"需要使用parseInt(e.detail.value)转化为"232","adfs"通过parseInt转换后,会变成"NaN"。

        另外,在修正父组件中value值时,需要先把未校验的内容传给父组件中变量;例如:当父组件中值为0时,用户输入内容为-1200小于最小值0,校验后虽然给父组件中值重新赋值为0,但之前值为0未发生变化,此时输入框中还是显示-1200。所以此处需要先将错误值传递给父组件中的变量,再进行校验处理,这样则需要对旧值进行备份。

        对于JS中的计时器,很多人可能还不知道其能传递形参,这块知识在之前一篇中也讲述过,需要了解的可以去查看。地址:setTimeout和setInterval区别,以及定时器的传参功能-CSDN博客

setTimeout参数

参数描述
func必需。要执行的javascript代码串,也可以是一个函数
time必需。执行周期(毫秒数)
param1, param2, ...可选。传入执行函数其他参数

        将parseInt之后的新值,和之前旧值,通过计时器的形参传递到下个执行函数中,代码如下:

// components/Counter/index.js
Component({/*** 组件的属性列表*/properties: {// 值value: {type: Number,value: 0},// 目标keytarget: {type: String,value: ''},// 最小值min: {type: Number,value: null},// 最大值max: {type: Number,value: null}},/*** 组件的初始数据*/data: {isDisabledAdd: false,     // 是否禁用 加 按钮isDisabledMul: false,     // 是否禁用 减 按钮inputHandle: null,        // 计时器手柄},/*** 组件的方法列表*/methods: {// 略...// 输入后  监听事件inputEvent(e){clearTimeout(this.inputHandle);// 开始计时this.inputHandle = setTimeout((nValue, oValue) => {console.log('e', oValue, nValue);}, 800, parseInt(e.detail.value), this.data.value);}}
})

        这样,像"032"之类新值,则会转换为正常数值传递到下次执行函数中;旧值则通过oValue往下传递,当父组件中value被替换后,this.data.value被修改,也不会影响到oValue,使其缓存到下次执行函数中备用。

四、判断是否为NaN

        当最后一次校验函数执行后,parseInt(e.detail.value)传递的新值如果为NaN,则将其置回来之前旧值,为了确保值能正常被更新,所以需要先将父组件中的变量赋值为未校验的值。代码如下:

// components/Counter/index.js
Component({/*** 组件的属性列表*/properties: {// 值value: {type: Number,value: 0},// 目标keytarget: {type: String,value: ''},// 最小值min: {type: Number,value: null},// 最大值max: {type: Number,value: null}},/*** 组件的初始数据*/data: {isDisabledAdd: false,     // 是否禁用 加 按钮isDisabledMul: false,     // 是否禁用 减 按钮inputHandle: null,        // 计时器手柄},/*** 组件的方法列表*/methods: {// 略...// 输入后  监听事件inputEvent(e){clearTimeout(this.inputHandle);// 开始计时this.inputHandle = setTimeout((nValue, oValue) => {this.triggerMsg(e.detail.value);     // 先置为输入内容,后续校验后再相应调整// 判断内容是否为NaNif(isNaN(nValue)) {this.triggerMsg(oValue);return;}console.log('e', oValue, nValue);}, 800, parseInt(e.detail.value), this.data.value);}}
})

        此时,再输入像”adfs“之类内容,则会被置为之前旧值。当然,这里输入框input的类型为number,在手机端出现的键盘为 数字键盘,不会出现输入字母情况。但为程序严谨性,或以防某些平台存在兼容问题,还是需要考虑到这一步。

五、最小值和最大值校验

        对于最大值和最小值的校验,在上一篇中已有,并对之前判断稍作修改,这个大家慢慢细评、多思考。代码如下:

// components/Counter/index.js
Component({/*** 组件的属性列表*/properties: {// 值value: {type: Number,value: 0},// 目标keytarget: {type: String,value: ''},// 最小值min: {type: Number,value: null},// 最大值max: {type: Number,value: null}},/*** 组件的初始数据*/data: {isDisabledAdd: false,     // 是否禁用 加 按钮isDisabledMul: false,     // 是否禁用 减 按钮inputHandle: null,        // 计时器手柄},/*** 组件的方法列表*/methods: {// 略...// 输入后  监听事件inputEvent(e){clearTimeout(this.inputHandle);// 开始计时this.inputHandle = setTimeout((nValue, oValue) => {this.triggerMsg(e.detail.value);     // 先置为输入内容,后续校验后再相应调整// 判断内容是否为NaNif(isNaN(nValue)) {this.triggerMsg(oValue);return;}// 判断值是否小于最小值if(this.data.min != null && this.data.min >= nValue) {this.triggerMsg(this.data.min);                   // 将值置为最小值this.setData({ isDisabledMul: true });            // 当底于最小值时,禁用 减 按钮// 如果减小按钮禁用,解除增加按钮的禁用if(this.data.isDisabledAdd) this.setData({ isDisabledAdd: false }); return;} else if(this.data.isDisabledMul) {this.setData({ isDisabledMul: false }); }// 判断值是否大于最大值if(this.data.max != null && this.data.max <= nValue)  {this.triggerMsg(this.data.max);                   // 将值置为最大值this.setData({ isDisabledAdd: true });            // 当超过最大值时,禁用 加 按钮 // 如果增加按钮禁用,解除减小按钮的禁用if(this.data.isDisabledMul) this.setData({ isDisabledMul: false }); return;} else if(this.data.isDisabledAdd) {this.setData({ isDisabledAdd: false }); }console.log('e', oValue, nValue);}, 800, parseInt(e.detail.value), this.data.value);}}
})

       此时,通过键盘输入内容后,如果不符合规范内容,或者超出限定范围的值,都会被立即纠正,并改回之前的值。如下图:

        上篇中addEvent事件函数和mulEvent事件函数中,都有对最大值和最小值的判断,如果觉得此处代码较为冗余,大家可以自行调整,合并代码。由于这里只是演示效果,就不细分了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/393760.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蜂窝网络架构

2G/3G 4G eNB RF-RRU eCPRI RRU-BBU 光纤 5G From 38.300 AMF处理信令等&#xff0c;UPF 用户面&#xff0c;后面还有SMF

医院不良事件监测预警上报系统,PHP不良事件管理系统源码

不良事件上报系统&#xff0c;支持医院进行10大类医疗安全&#xff08;不良&#xff09;事件的上报管理&#xff1b;帮助医院管理部门更好把控不良事件的发生趋势&#xff0c;分析医院内部潜在的问题和风险&#xff0c;采取适当的管理措施&#xff0c;有效加强质量控制&#xf…

MySQL总体功能

基于Innodb存储引擎的讨论 MySQL 核心功能 功能解决的问题ACID模型数据并发访问&#xff0c;和奔溃恢复安全问题,一致性&奔溃恢复索引数据查询效率问题备份容错设计,解决硬件错误带来的问题复制数据迁移监控执行数据库操作的异常记录

JavaEE: wait(等待) / notify (通知)

文章目录 wait(等待) / notify (通知)总结 wait(等待) / notify (通知) 线程在操作系统上的调度是随机的~ 那么我们想要控制线程之间执行某个逻辑的先后顺序,那该咋办呢? 可以让后执行的逻辑,使用wait, 先执行的线程,在完成某些逻辑之后,通过notify来唤醒对应的wait. 另外,通…

C++-类与对象基础

一&#xff0c;类的定义 1.1类定义格式 class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。类体中内容称为mian类的成员&#xff1a;类中的变量称为类的属性或成员变量; 类中的函数称为类的方法或者…

【nginx】centos7安装并配置开机自启

【nginx】配置开机自启 1.nginx配置开机自启 安装完成nginx之后 vim /lib/systemd/system/nginx.service[Unit] Descriptionnginx Afternetwork.target[Service] Typeforking ExecStart/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf ExecReload/usr/loc…

理解Spring框架2:容器IOC

理解Spring框架2&#xff1a;容器IOC (qq.com)

ViP-LLaVA: Making Large Multimodal Models Understand Arbitrary Visual Prompts

发表时间&#xff1a;cvpr2024 论文链接&#xff1a;https://readpaper.com/pdf-annotate/note?pdfId2357936887983293952&noteId2426262228488986112 作者单位&#xff1a;University of Wisconsin–Madison Motivation&#xff1a;现在的多模态模型都关注整张图像的理…

torch量化接口深度解读-eager模式-fx模式

一、定义 接口总结量化模式解读 二、实现 接口总结 1. PyTorch提供了三种不同的量化模式&#xff1a;Eager模式量化、FX图模式量化&#xff08;维护&#xff09;和PyTorch 2导出量化。 2. Eager Mode Quantization是一个测试版功能。用户需要进行融合&#xff0c;并手动指定量…

尚硅谷谷粒商城项目笔记——六、使用navciat连接docker中的mysql容器【电脑CPU:AMD】

六、使用navciat连接docker中的mysql容器 注意&#xff1a; 因为电脑是AMD芯片&#xff0c;自己知识储备不够&#xff0c;无法保证和课程中用到的环境一样&#xff0c;所以环境都是自己根据适应硬件软件环境重新配置的&#xff0c;这里的虚拟机使用的是VMware。 1navicat免费…

最新版Ableton Live 12.20 WIN MAC,长期更新持续有效

一。Ableton Live 12.20 WIN &MAC 2024.08.06发布 Ableton Live Suite是一款由ABLETON公司开发的功能强大且全面的音乐制作、内容编辑和演奏分析软件。它极大地改进了许多社会功能&#xff0c;使音乐创作、背景音乐的开发变得更加快捷方便。 软件的主要功能包括录音、作曲…

WordPress原创插件:Category-id-list分类ID显示查看

WordPress原创插件&#xff1a;Category-id-list分类ID显示查看 插件设置位置在工具栏

学习vue3 五,传送,缓存组件以及过渡和过渡列表

目录 Teleport传送组件 keep-alive缓存组件 transition动画组件 1. 过渡的类名 2. 自定义过渡class名 3. transition的生命周期 4.appear transition-group 1. 过渡列表 2. 列表的移动过渡 3. 状态过渡 Teleport传送组件 Teleport Vue 3.0新特性之一。 Teleport 是一…

Spring的配置类分为Full和Lite两种模式

Spring的配置类分为Full和Lite两种模式 首先查看 Configuration 注解的源码, 如下所示: Target({ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Documented Component public interface Configuration {AliasFor(annotation Component.class)String value() defau…

(C23/C++23) 语句末尾的标签

文章目录 &#x1f516;前言&#x1f3f7;️ref&#x1f3f7;️标号 &#x1f516;兼容&#x1f3f7;️23标准前&#x1f3f7;️23标准后&#x1f3f7;️原因 &#x1f516;未兼容&#x1f516;END&#x1f31f;关注我 &#x1f516;前言 &#x1f3f7;️ref C23提案复合语句末…

Serverless 1

一、云原生应用 云原生应用覆盖到&#xff1a; 大数据&#xff0c;人工智能&#xff0c;边缘计算&#xff0c;区块链等 服务代理&#xff1a;envoy API 网关&#xff1a;APISIX 服务网格&#xff1a;Istio 服务发现&#xff1a;CoreDNS 消息和流式处理&#xff1a;kafka Serve…

PDF预览:利用vue3-pdf-app实现前端PDF在线展示

目录 PDF预览&#xff1a;利用vue3-pdf-app实现前端PDF在线展示 一、vue3-pdf-app组件介绍及其优点 1、vue3-pdf-app是什么 2、作用与场景 3、类似的插件 二、项目初始化与依赖安装 1、初始化Vue3项目 2、安装依赖 三、集成vue3-pdf-app插件 1、引入插件 2、配置组件…

ChemLLM化学大模型再升级,AI助力化学研究

ChemLLM 介绍 ChemLLM 系列模型 是由上海人工智能实验室基于InternLM2 开发的首个兼备化学专业能力和对话、推理等通用能力的开源大模型。相比于现有的其他大模型&#xff0c;ChemLLM 对化学空间进行了有效建模&#xff0c;在分子、反应和其他领域相关的化学任务上表现优异。 …

解决戴尔台式电脑休眠后无法唤醒问题

近期发现有少量戴尔的台式机会有休眠后无法唤醒的问题&#xff0c;具体现象就是电脑在休眠后&#xff0c;电源指示灯以呼吸的频率闪烁&#xff0c;无论怎么点鼠标和键盘都没有反应&#xff0c;并且按开机按钮也没法唤醒&#xff0c;只能是长按开机键强制关机再重启才行&#xf…

leetcode 958.二叉树的完全性检验

1.题目要求: 给你一棵二叉树的根节点 root &#xff0c;请你判断这棵树是否是一棵 完全二叉树 。在一棵 完全二叉树 中&#xff0c;除了最后一层外&#xff0c;所有层都被完全填满&#xff0c;并且最后一层中的所有节点都尽可能靠左。最后一层&#xff08;第 h 层&#xff09;…