微信小程序自助停车，输入车牌号功能实现

话不多说，先上效果图

效果图 ( 改一改h5也能用 )
功能列表

根据输入位置自动显示下方键盘为候选地区或数字字母

输入位置后自动跳转至下一位

删除号码后自动返回上一位

点击可选填新能源号码

代码复现
3.1 html结构

<view class="root"><view class="title">请输入要授权的车牌号<text class="gray f-26">（新能源车辆选填）</text></view><!-- 车牌选框 --><view class="num-box"><block wx:for='{{car}}' wx:for-item='box' wx:for-index='idx'><view id="{{idx}}" class="box {{idx==selectIdx?'active':''}}" style="{{idx==7&&box.text=='新能源'?'':'font-size:30rpx;color:#333333;'}}" catchtap="selectCarNum">{{box.text}}</view></block></view><button class="btn" catchtap="btnTap">下一步</button>
</view><!-- 键盘 -->
<view class="keyboard-box"><block wx:for='{{keyboardList}}' ><button hover-class="keyboard-hover" class="{{(selectIdx==1&&index<=9)||(selectIdx>=1&&index>=36)?'keyboard banKeyboard':'keyboard'}}" data-idx="{{index}}" catchtap="{{(selectIdx==1&&index<=9)||(selectIdx>=1&&index>=36)?'':'keyboardTap'}}">{{item}}</button></block><button hover-class="keyboard-hover" class="delete-key" catchtap="deleteTap"><image class="delete-key-logo" mode="widthFix" src="/images/delete-key-logo.png"></image></button>
</view>

3.2 js初始数据

data: {selectIdx:'0', //当前输入框的索引carNumber:'', //最终的车牌号car:[ //车牌{ id: 0, text: '' },{ id: 1, text: '' },{ id: 2, text: '' },{ id: 3, text: '' },{ id: 4, text: '' },{ id: 5, text: '' },{ id: 6, text: '' },{ id: 7, text: '新能源' },],keyboard1:'京津沪渝苏浙豫粤川陕冀辽吉皖闽鄂湘鲁晋黑赣贵甘桂琼云青蒙藏宁新使领警港澳台学',keyboard2:'1234567890ABCDEFGHJKLMNOPQRSTUVWXYZ学澳港',},onLoad: function (options) {//页面初始化时候加载一下键盘的数据，默认为地区显示。let keyboardList1 = this.data.keyboard1.split('');let keyboardList2 = this.data.keyboard2.split('');this.setData({ keyboardList:keyboardList1,keyboardList1,keyboardList2})},

3.3 js对输入框及键盘的处理方法

  selectCarNum(e){ //点击框let that = this;let { selectIdx } = that.data;let idx = e.currentTarget.id;idx == 7 && selectIdx==(6||7) ? selectIdx = 7 : '';that.setData({ selectIdx })},keyboardTap(e){ //点击键盘let that = this;let idx = e.currentTarget.dataset.idx;let { keyboardList,keyboardList1,keyboardList2, car, selectIdx } = that.data;car[selectIdx].text = keyboardList[idx];selectIdx != (6 || 7) ? selectIdx++ : '';that.changeKeyboard(selectIdx);that.setData({car,selectIdx,})},deleteTap(){ //删除let that = this;let { keyboardList, keyboardList1,keyboardList2,car, selectIdx } = that.data;car[selectIdx].text=''if(selectIdx == 7){ car[7].text = '新能源'}selectIdx == 0 ? selectIdx = 0 : selectIdx--;that.changeKeyboard(selectIdx);that.setData({car, selectIdx,})},changeKeyboard(selectIdx){ //根据当前索引切换键盘let { keyboardList, keyboardList1, keyboardList2} = this.data;selectIdx <= 0 ? keyboardList = keyboardList1 : keyboardList = keyboardList2this.setData({ keyboardList })},btnTap(){ //提交let that = this;let { car } = that.data;let carNumber=[];let check=true;car.map((v,k)=>{if(v.text==''){wx.showToast({title: '请正确填写车牌',icon: 'none',duration: 1500,})return check = false;}if(v.text!='新能源'){carNumber.push(v.text)}})if(!check){return}var number = carNumber.join(''); //提交的车牌号that.setData({carNumber:number})wx.setStorageSync('carNumber', number)wx.navigateBack({delta: 1,})},

3.4 css样式

.title{font-size:36rpx;font-family:PingFang SC;font-weight:500;color:rgba(51,51,51,1);margin: 80rpx 0 40rpx;
}/* 车牌选框 */
.num-box{display: flex;flex-wrap: nowrap;}
.box{flex-shrink: 0;width:70rpx;height:90rpx;margin-right: 12rpx;text-align: center;line-height: 90rpx;border:2rpx solid rgba(210,210,210,1);border-radius:10rpx;font-size:30rpx;font-family:PingFang SC;font-weight:500;color:rgba(51,51,51,1);
}
.box:nth-child(2){margin-right: 29rpx;position: relative;
}
.box:last-child{margin-right: 0;font-size:18rpx;font-family:PingFang SC;font-weight:500;color:rgba(168,168,168,1);
}
.box:nth-child(2)::after{position: absolute;content: '';width:8rpx;height:8rpx;border-radius: 50%;background: black;display: inline-block;top: 50%;transform: translateY(-50%);right: -20rpx;margin: 0;padding: 0;font-size:48rpx;font-family:PingFang SC;font-weight:500;color:rgba(51,51,51,1);
}
.box.active{border:2rpx solid #44C75F;
}
.btn{width:690rpx;height:90rpx;margin: 80rpx 0 34rpx;line-height: 90rpx;background:#44C75F;border-radius:45rpx;font-size:32rpx;font-family:PingFang SC;font-weight:500;color:rgba(255,255,255,1);
}
.keyboard-box{position: fixed;bottom: 0;left: 0;right: 0;box-sizing: border-box;padding-top: 27rpx;padding-left: 10rpx;display: flex;flex-wrap: wrap;width: 750rpx;height: 470rpx;background: #CED4DB;
}
.keyboard{padding: 0;margin-left: 0;width:66rpx;height:92rpx;margin-right: 8rpx;margin-bottom: 16rpx;background:rgba(255,255,255,1);box-shadow: 1rpx 2rpx 2rpx #A8A8A8;border-radius:8rpx;line-height: 92rpx;text-align: center;font-size:36rpx;font-family:PingFang SC;font-weight:500;color:rgba(0,0,0,1);
}
.banKeyboard{color: #D2D2D2;
}
.keyboard-hover{transform: scale(1.1);
}
.delete-key{padding: 0;margin: 0;display: flex;justify-content: center;align-items: center;width:135rpx;height:92rpx;background:rgba(255,255,255,1);border-radius:8rpx;
}
.delete-key-logo{width: 61rpx;
}

微信小程序自助停车，输入车牌号功能实现相关推荐

使用 Java（SpringMVC）+MySQL 实现基于微信小程序的停车管理系统【100011100】
一种基于微信小程序的停车管理系统摘要: 本项目基于停车管理选题,通过分析各类停车管理的需求和常见的停车管理系统方案,提出了一种基于微信小程序的停车管理系统. 本系统以微信小程序作为前端,在小程序内提 ...
计算机毕业设计PHP基于微信小程序寸金校园租车平台（源码+程序+uni+lw+部署）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: phpStudy+ Vscode +Mysql5.7 + HBuilderX+Navicat11+Vue ...
微信小程序获取input输入的值
微信小程序获取input输入的值 view <view><text>姓名:</text><input type='text' name="user ...
微信小程序的语音输入功能开发：微信同声传译插件
微信小程序的语音输入,语音转文字功能在很多场景要使用到比如搜索框,搜索关键字的时候用语音输入比用文字方便多了再比如再天下网吧小程序里发帖,发布回复时,用语音输入比输入文字也方便不少那么如何实现语 ...
微信小程序好看的输入信息界面——发送验证码倒计时
微信小程序好看的输入信息界面简介输入个人信息界面,录入个人信息等都可以使用到这个界面: 1.输入信息的布局界面 2.选择大陆还是港澳台的手机号码 3.输入手机号码, 4.获取验证码的60S倒计时, ...
基于微信小程序小区租拼车管理信息系统+后台ssm
随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟.本文介绍了微信小程序小区租拼车管理信息系统的开发全过程.通过分析微信小程序小区租拼车管理信息系统管理的不足,创建了一个 ...
微信小程序 maxlength ios输入拼音也会被限制
项目场景: 需要限制输入字数长度,直接使用了 maxlength ,但是在苹果系统中发现存在问题问题描述: 微信小程序 maxlength ios输入拼音时也会被限制解决方案: 不使用 maxle ...
【微信小程序/实现】实现留言墙功能页面
[微信小程序/实现]实现留言墙功能一.需求分析二.功能设计三.页面设计四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...

微信小程序自助停车，输入车牌号功能实现

微信小程序自助停车，输入车牌号功能实现相关推荐

最新文章

热门文章

微信小程序 自助停车，输入车牌号功能实现

微信小程序 自助停车，输入车牌号功能实现相关推荐

最新文章

热门文章

微信小程序自助停车，输入车牌号功能实现

微信小程序自助停车，输入车牌号功能实现相关推荐