西安网站制作公司哪,如何做平台网站,合肥 网站制作,十大知名博客网站微信小程序通过自定义组件#xff0c;实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式#xff0c;更新计数器的值#xff0c;并修改相关联的其它变量。通过提升用户体验#xff0c;对计数器进行优化设计#xff0c;使用户操作更加便捷… 微信小程序通过自定义组件实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式更新计数器的值并修改相关联的其它变量。通过提升用户体验对计数器进行优化设计使用户操作更加便捷和直观。 计数器的实现主要涉及到几个关键部分上一篇已重点讲过该篇将讲述一下中间input输入框值变化后的校验操作。 由于该篇是接上一篇继续完善和优化所以建议先了解上一篇后再来看此篇内容。地址微信小程序 - 自定义计数器-CSDN博客 如上图中增加、减小按钮操作已限定了其值范围但是通过小键盘输入内容后发现值并不正规或者已超出了其限定范围所以需要增加监听input输入框的内容变化对其值进行校验和处理。
一、bindinput事件监听 首页需要在Counter计数器中绑定监听事件bindinput事件会在每次输入一个数字、字母或符号时执行一次。index.wxml代码如下
view classcounter-wrapbutton classbtn mul disabled{{isDisabledMul}} bind:tapmulEvent-/buttoninput typenumber value{{value}} classnumber bindinputinputEvent /button classbtn add disabled{{isDisabledAdd}} bind:tapaddEvent/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)转化为232adfs通过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事件函数中都有对最大值和最小值的判断如果觉得此处代码较为冗余大家可以自行调整合并代码。由于这里只是演示效果就不细分了。
