微信小程序车牌号码模拟键盘输入功能的实现代码

先来一波预览图。

预览图片一:

预览图二:

预览图三:

预览图四:

预览图五:

大概的效果就和原来图差不多。

思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码。)

大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段。

第一,原型的设计思路:先设计好模拟键盘的大概架构,样式。这里的分为三个不同的模拟键盘结构合在一起,分部为汉字,字母,数字,其样式统一;

第二:数据的交互思路:对需要的数据绑定或者修改填充等,如何获取,通过什么方式获取,再怎么反馈出来,需要搭建好数据的来回交互传递的大概模型;

第三,交互的体验思路:触发或者在输入框点击输入的时候,启动模拟键盘,先用汉字选择,其次是字母,最后由字母和数字混合,对三个架构先进行需求排序的理清;

第四,功能的操作思路:模拟键盘的功能性按钮,比如数字与字母之间的的切换,删除最后一位数据,清空全部数据和状态,关闭的结束等操作等体验。

第五:输入判断的思路:判断车牌号码输入的位数,第一位和第二位分部是什么,字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。

大概就这这些样子了,能写怎么多字,感觉都超纲了,如果有错的地方,还望留言指正。

最后是源码:

wxml:

 <view class='page wrapper'>
 <view class="weui-cell__bd">
  <view bindtap='LicensePlateNumber' class='LicensePlateNumber'>
  <input value='{{LicensePlateNumber}}' disabled='true' placeholder='请选择'></input>
  </view>
 </view>
 <view>
  <view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'>
  <!-- 遮罩层 -->
  <view class='licensePlate_Bg' bindtap='licensePlate_close'>
  </view>
  <!-- 省份 -->
  <view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'>
   <view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
  </view>
  <!-- 字母 -->
  <view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'>
   <view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
   <view class='licensePlate_letterTist_but'>
   <view class='licensePlate_but' bindtap='licensePlate_switchDigital'>数字</view>
   <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
   <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
   </view>
  </view>
  <!-- 数字 -->
  <view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'>
   <view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
   <view class='licensePlate_digital_but'>
   <view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view>
   <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
   <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
   </view>
  </view>
  </view>
 </view>
 </view>

wxss:

@import "weui.wxss";
 page{
  min-height:%;
 }
 .wrapper{
  width: rpx;
  overflow:hidden;
 }
 .licensePlateShow{
 width: rpx;
 min-height: %;
 position: absolute;
 bottom: ;
 }
 .licensePlate_Bg{
 min-height: %;
 width: rpx;
 position: absolute;
 z-index: ;
 overflow: hidden;
 }
 .licensePlate_provinces_Box{
 width: rpx;
 background-color: #ddda;
 margin: auto;
 position: absolute;
 bottom: ;
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 /* border-top: px solid #abbbd; */
 z-index: ;
 }
 .licensePlate_provincesTist{
 flex:%;
 height: rpx;
 line-height: rpx;
 margin: auto;
 text-align: center;
 background-color:#ffffff;
 border-top: px solid #abbbd;
 border-left: px solid #abbbd;
 }
 .licensePlate_provincesTist:nth-child(n){
 border-right: px solid #abbbd;
 }
 .licensePlate_letter_Box{
 width: rpx;
 background-color: #ddda;
 margin: auto;
 position: absolute;
 bottom: ;
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 /* border-top: px solid #abbbd; */
 z-index: ;
 }
 .licensePlate_letterTist{
 flex:%;
 height: rpx;
 line-height: rpx;
 margin: auto;
 text-align: center;
 background-color:#ffffff;
 border-top: px solid #abbbd;
 border-left: px solid #abbbd;
 }
 .licensePlate_letterTist:nth-child(n){
 border-right: px solid #abbbd;
 }
 .licensePlate_letterTist:nth-child(){
 border-right: px solid #abbbd;
 }
 .licensePlate_letterTist_but{
 width: rpx;
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 }
 .licensePlate_digital_Box{
 width: rpx;
 background-color: #ddda;
 margin: auto;
 position: absolute;
 bottom: ;
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 /* border-top: px solid #abbbd; */
 z-index: ;
 }
 .licensePlate_digitalTist{
 flex:%;
 height: rpx;
 line-height: rpx;
 margin: auto;
 text-align: center;
 background-color:#ffffff;
 border-top: px solid #abbbd;
 border-left: px solid #abbbd;
 }
 .licensePlate_digital_but{
 width: rpx;
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 }
 .licensePlate_but{
 flex: ;
 height: rpx;
 line-height: rpx;
 text-align: center;
 color: #ffffff;
 background-color:#ff;
 border-top: px solid #abbbd;
 border-left: px solid #abbbd;
 }
 .licensePlate_but:last-child{
 border-right: px solid #abbbd;
 }
 .LicensePlateNumber{
 width: rpx;
 height: rpx;
 border-bottom: rpx solid #abbbd
 }

js:

 Page({
  data: {
  licensePlateShowHidden:true,
  licensePlate_provinces_Box:true,
  licensePlate_letter_Box: true,
  licensePlate_digital_Box: true,
  licensePlate_provinces: [
  "京", "沪", "浙", "苏", "粤", "鲁",
  "晋", "冀", "豫", "川", "渝", "辽",
  "吉", "黑", "皖", "鄂", "津", "贵",
  "云", "桂", "琼", "青", "新", "藏",
  "蒙", "宁", "甘", "陕", "闽", "赣",
  "湘"
  ],
  licensePlate_letter: [
  "A", "B", "C", "D", "E", "F",
  "G", "H", "L", "J", "K", "L",
  "M", "N", "O", "P", "Q", "R",
  "S", "T", "U", "V", "W", "X",
  "Y", "Z"
  ],
  licensePlate_digital: [
  "", "", "",
  "", "", "",
  "", "", "",
  ""
  ],
  LicensePlateNumber:'',
 },
 // 显示模拟键盘
 LicensePlateNumber:function(){
  var that = this;
  var LicensePlateNumber = this.data.LicensePlateNumber;
  var LicensePlateNumberLen = LicensePlateNumber.length;
  console.log(LicensePlateNumber, LicensePlateNumberLen)
  if (LicensePlateNumberLen == ){
  this.setData({
   licensePlateShowHidden: false,
   licensePlate_provinces_Box: false,
  })
  } else if (LicensePlateNumberLen == ){
  this.setData({
   licensePlateShowHidden: false,
   licensePlate_letter_Box: false,
  })
  }else{
  this.setData({
   licensePlateShowHidden: false,
   licensePlate_digital_Box: false,
  })
  }
 },
 // 切换成字母
 licensePlate_switchLetter:function(){
  this.setData({
  licensePlate_provinces_Box:true,
  licensePlate_letter_Box:false,
  licensePlate_digital_Box: true,
  })
 },
 // 切换成数字
 licensePlate_switchDigital: function () {
  var LicensePlateNumber = this.data.LicensePlateNumber;
  var LicensePlateNumberLen = LicensePlateNumber.length;
  if (LicensePlateNumberLen == ){
  wx.showToast({
   title: '车牌号码第二位必须是字母',
   icon: 'none',
   duration: ,
  })
  }else{
  this.setData({
   licensePlate_provinces_Box: true,
   licensePlate_letter_Box: true,
   licensePlate_digital_Box: false,
  })
  }
 },
 // 删除
 licensePlate_delete: function (e) {
  var LicensePlateNumber = this.data.LicensePlateNumber;
  var LicensePlateNumberLen = LicensePlateNumber.length;
  var LicensePlateNumberDelete = LicensePlateNumber.split('');
  var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(,-)
  if (LicensePlateNumberDelete.slice(,-).length == ){
  this.setData({
   licensePlate_provinces_Box: true,
   licensePlate_letter_Box: false,
   licensePlate_digital_Box: true,
  })
  } else if (LicensePlateNumberLen == || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(, -).length == ){
  this.setData({
   licensePlate_provinces_Box: false,
   licensePlate_letter_Box: true,
   licensePlate_digital_Box: true,
  })
  }
  this.setData({
   LicensePlateNumber: NewLicensePlateNumber
  })
 },
 // 清空
 licensePlate_empty: function (e) {
  this.setData({
  LicensePlateNumber:'',
  licensePlate_provinces_Box: false,
  licensePlate_letter_Box: true,
  licensePlate_digital_Box: true,
  })
 },
 // 关闭模拟键盘
 licensePlate_close:function(){
  this.setData({
  licensePlateShowHidden: true
  })
 },
 // 点击获取省份
 licensePlate_provinces: function (e) {
  this.setData({
  LicensePlateNumber: e.target.dataset.licenseplateprovinces,
  licensePlate_letter_Box: false,
  licensePlate_digital_Box: true,
  })
  console.log(e.target.dataset.licenseplateprovinces)
 },
 // 点击获取字母
 licensePlate_letter: function (e) {
  var LicensePlateNumber = this.data.LicensePlateNumber;
  var LicensePlateNumberLen = LicensePlateNumber.length;
  if (LicensePlateNumberLen != ) {
  this.setData({
   LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
  })
  console.log(e.target.dataset.licenseplateprovinces)
  } else {
  wx.showToast({
   title: '车牌号码最多不能超过位',
   icon: 'none',
   duration: ,
  })
  }
 },
 // 点击获取数字
 licensePlate_digital: function (e) {
  var LicensePlateNumber = this.data.LicensePlateNumber;
  var LicensePlateNumberLen = LicensePlateNumber.length;
  if (LicensePlateNumberLen != ){
  this.setData({
   LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
  })
  console.log(e.target.dataset.licenseplateprovinces)
  }else{
  wx.showToast({
   title: '车牌号码最多不能超过位',
   icon:'none',
   duration:,
  })
  }
 },
 })

总结

以上所述是小编给大家介绍的微信小程序车牌号码模拟键盘输入功能的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • 详解微信小程序调起键盘性能优化

    在小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要具体问题具体分析. 需求分析 最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘进入评论状态.从需求来看,我们应该在onReady函数中调起键盘,因为onReady函数是在页面初次渲染完成时被调用.但是在实践中我们发现,对于一些配置不好的手机,其加载页面速度较慢,在onReady函数调用时页面并没有渲染完毕,就会导致placeholder和input组件位置错乱的现象.其本质

  • 微信小程序自定义键盘 内部虚拟支付

    本文实例为大家分享了微信小程序自定义键盘的具体代码,供大家参考,具体内容如下 先看效果图 : 微信支付的话,调用微信支付接口是有自己的小键盘的,因为小程序没有内部键盘,所以有时候商城内部需要零钱支付 ,会员卡支付,输入密码就需要自己做一个小键盘了. css  跟  html不做过多说明 直接照搬就行   页面上面的3个小图片就不提供了 js 部分做了详细注释 <view class="popup-memu"> <view class="line"

  • 微信小程序车牌号码模拟键盘输入功能的实现代码

    先来一波预览图. 预览图片一: 预览图二: 预览图三: 预览图四: 预览图五: 大概的效果就和原来图差不多. 思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码.) 大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段. 第一,原型的设计思路:先设计好模拟键盘的大概架构,样式.

  • 微信小程序之导航滑块视图容器功能的实现代码(简单两步)

    先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码 编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw

  • 微信小程序彩票号码生成器

    本文为大家分享了微信小程序彩票号码生成器的具体代码,供大家参考,具体内容如下 一.案例说明 设计一个小程序,生成一注7个彩票号码(1-31),并在圆形图标上显示,加上一个按钮,每点一次重新生成,同时生成不同的颜色圆形图标. 二.案例代码 1)index.wxml文件 <!--index.wxml--> <image src="/image/caipiao.png" style="width: 750rpx; height: 256rpx; display:

  • 微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例 如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的

  • 微信小程序实现简单input正则表达式验证功能示例

    本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e

  • 微信小程序详解如何实现付款功能

    目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页 总结 1 支付场景 我们梳理一下支付场景是什么样子的,首先可以浏览商品,然后在商品的详情页里进行结算.结算的主要目的是生成订单,订单生成好之后就可以进行支付. 支付其实是先向微信支付提交一个在线订单,订单提交成功之后就可以调用支付接口来拉起支付界面. 拉起支付界面之后我们需要按照提示的金额进行付费,付费成功后我们更新一下订单的状

  • 微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

  • 微信小程序 视图容器组件的详解及实例代码

    微信小程序 视图容器组件详解: 小程序给出的视图容器组件有三个:</view>.</scroll-view>和</swiper>: 1.</view> 视图容器 </view>相当于html中的</div>标签,有四个属性: hover和hover-class与点击效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果. hover-start-time和hover-stay-time与点击效果的时间有关:h

  • 微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

随机推荐