主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
当我在开发一个小程序时,我创建了一个关于汽车的项目。 接下来,我必须添加车辆信息和车牌号,并使用车牌键盘输入它们。 当时我就放弃了这个条件。 后来在添加车辆信息时,老板看到我在数据库中随机输入了一个车牌号,让我添加^o^
1 。 渲染
2.相关代码使用组件表单实现键盘输入
组件代码index.wxml
{{item}} { {item}} {{item}} {{item}} >{{item}} {{item}} {{item}} 确认
index.css
.carPlate{ 位置:固定;填充:12rpx 12rpx 30rpx; ; 底部: 0; /* 高度: 150px; */ 字体- 大小: #fff; 框- 大小: 边框-b牛;边框-顶部:1px实心rgb(211,207,207);z-索引:200;}.wordList{显示:flex;宽度:100%; ]; 对齐-items: center;}.wordItem{ margin: 5rpx; width: 70rpx; line-height: 70rpx; text-align: center; -半径:10rpx;}.wordconfirm{ 宽度:130rpx; 颜色:#473af0;}.wordClear{ 宽度:100rpx;}.clearImg{ 宽度:60rpx; 垂直 -align; : middle;}
index.js
组件 ( { property: { type: { type: Number, default: 1, }, show: { type: Boolean, default: false, } }, data: { cityKeyword1: '北京、上海、浙江、广东、山东、山西、河南省'',城市关键词2:'四川省、余辽治黑、安徽省、湖北省、湖南省、江西省', cityKeyword3: '福建、陕西、甘肃、宁夏、孟津、贵云', cityKeyword4: '桂琼庆、香港、澳门、台湾', keyNumber: '1234567890', wordList1: 'QWERTYUIOP', wordList2: 'ASDFGHJKL', wordList3: 'ZXCVBNM', }, method: { handleClick(e) { let value = e.currentTarget.dataset.item; let type = e.currentTarget.dataset.type; switch(value) { case 'confirm': this. '确认'); 案例 '删除': this.triggerEvent('删除'); 默认值: this.triggerEvent('change', { value, type }); span style="font -size: 14px;">3.引入父组件点击输入后的上拉效果我们想要为了实现这一点。 一开始我想用offset来实现,但是实现起来很困难,因为下班后还要洗衣服。 我在创建购物车时想到了使用transform的想法。 原理类似,所以我就用了。 接下来,单击键盘外部将其关闭。 我的第一个想法是关闭父组中的键盘文件的最外层定义结束事件。 母体内部的盒子采用catch方式,防止产生气泡。 不过阻止冒泡似乎有点不可能,所以我去掉了阻塞的方法。 父组件的index.wxml*车牌号 {{carNo}} 请输入您的车牌号父组件索引。 js
Page({ data: { carNo: '', TranslationSpace: 0, inputType: 1, // 车牌输入类型,一个缩写, 两个数字或字母, showPlateInput: false, }, /* 用于点击时弹出键盘输入。空格是键盘向上拉动时的距离 */ handleClick( e) { /* 150 是键盘的高度 * / 让空间 = -(e.currentTarget.offsetTop - 150); /* regExp用于判断当前输入的车牌号是否为中文,并在键盘上显示中文或英文输入 * / let regExp = /^[\u4e00- \u9fa5]+/; 令 inputType = 1。 if(regExp.test(this.data.carNo)) { inputType = 2; } this.setData({ TranslationSpace: space, showPlateInput: true, inputType }) }, /* 键盘输入操作 */ handlePlateChange(e) { let value = e.detail.value; let type = e.detail.type; let carNo = this.data.carNo; if(type == 1) { this. setData({ inputType: 2 }) } this.setData({ carNo }) }, /* 点击键盘上的确定 */ handlePlateconfirm() { /* isCarPlate 是输入的车牌号,用于判断是否是符合规范 */ if (! this.isCarPlate(this.data.carNo)) { wx.showToast({ title: '请输入正确的车牌号' , icon: 'none', period: 2000 }) return fAlso; } this.setData({ TranslationSpace: 0, showPlateInput: false, inputType: 1 }) }, /* 用于删除键盘输入 */ handlePlateDelete(e) { let carNo = this.data.carNo; number substring(0, carNo.length - 1); if(carNo.length == 0) { this.setData({ inputType: 1 }) } this.setData({ carNo, }) }, / * 判断车牌号 */ isCarPlate(value) { return /^( ([北京、天津、上海、重庆、河北、云南、辽宁、湖南、安徽、山东、新江苏、浙江、甘肃、湖北、广西,甘肃、山西、蒙古、陕西、吉林、福建、广东、青海、西藏、四川、宁琼等][A-Z]( ([0-9]{5}[ DF])|([ DF]([A-HJ-NP- Z0-9])[0-9]{4 })))|([北京、天津、上海、重庆、河北、云南、辽宁、湖南、安徽、山东、新江苏、浙江、甘肃、湖北、广西、甘肃、山西、蒙古、陕西、吉林、福建、贵州、广东、青海、西藏、四川、宁琼][A-Z ][A-HJ[ k3]NP-Z0[ k3]9]{4}[A-HJ[ k3]NP-Z0-9 请挂断香港校警大使港澳]))$/.test(value) }})父组件index.css
.container{ 高度:100vh; 背景:#fff;}.translateView{ b背景:#eee;}.list{ margin-bottom: 20rpx; 背景:#fff;}.list:last-child{ margin: 0;}.item{ 显示:flex 宽度; :100%;高度:116rpx;框-大小:边框-框;-对齐项目:中心;边框-底部:1px实体#eee;}.item:last-子{边框: 无;}.label{ margin-right: 10rpx; width: 140rpx;}.contentBox{ display: flex; width: calc(100% - 150rpx); 对齐项目:center; ; justify-内容:空格-;}.promptText{ 颜色:#c7c7c7;}.inputBox{ 宽度:100%; 行-高度:80rpx;}我正在努力学习。 如果对您学习有帮助,请点赞(Like^_^)
推荐教程:《微信小程序》
评论前必须登录!
注册