微信小程序车牌号码模拟键盘输入练习，
未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。
相关资料参考：https://blog.csdn.net/littlerboss/article/details/79877918；
先来一波预览图。
预览图片一：
预览图二：
预览图三：
预览图四：
预览图五：
大概的效果就和原来图差不多。
思路解析：车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码，（注：其中的八位数的车牌号码为能源车的车牌号码。）
大概的逻辑思维，不包含代码获取值什么的或者验证其他的说明，详细看代码片段。
第一，原型的设计思路：先设计好模拟键盘的大概架构，样式。这里的分为三个不同的模拟键盘结构合在一起，分部为汉字，字母，数字，其样式统一；
第二：数据的交互思路：对需要的数据绑定或者修改填充等，如何获取，通过什么方式获取，再怎么反馈出来，需要搭建好数据的来回交互传递的大概模型；
第三，交互的体验思路：触发或者在输入框点击输入的时候，启动模拟键盘，先用汉字选择，其次是字母，最后由字母和数字混合，对三个架构先进行需求排序的理清；
第四，功能的操作思路：模拟键盘的功能性按钮，比如数字与字母之间的的切换，删除最后一位数据，清空全部数据和状态，关闭的结束等操作等体验。
第五：输入判断的思路：判断车牌号码输入的位数，第一位和第二位分部是什么，字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。
大概就这这些样子了，能写怎么多字，感觉都超纲了，如果有错的地方，还望留言指正。
最后是源码：
wxml：
1 <view class='page wrapper'> 2 <view class="weui-cell__bd"> 3 <view bindtap='LicensePlateNumber' class='LicensePlateNumber'> 4 <input value='{{LicensePlateNumber}}' disabled='true' placeholder='请选择'></input> 5 6 </view> 7 </view> 8 9 <view> 10 11 <view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'> 12 <!-- 遮罩层 --> 13 <view class='licensePlate_Bg' bindtap='licensePlate_close'> 14 </view> 15 16 <!-- 省份 --> 17 <view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'> 18 <view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view> 19 <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view> 20 </view> 21 22 <!-- 字母 --> 23 <view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'> 24 <view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view> 25 <view class='licensePlate_letterTist_but'> 26 <view class='licensePlate_but' bindtap='licensePlate_switchDigital'>数字</view> 27 <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view> 28 <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view> 29 <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view> 30 </view> 31 </view> 32 33 <!-- 数字 --> 34 <view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'> 35 <view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view> 36 <view class='licensePlate_digital_but'> 37 <view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view> 38 <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view> 39 <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view> 40 <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view> 41 </view> 42 </view> 43 </view> 44 45 </view> 46 </view>
wxss：
1 @import "weui.wxss"; 2 3 page{ 4 min-height:100%; 5 } 6 7 .wrapper{ 8 width: 750rpx; 9 overflow:hidden; 10 } 11 12 .licensePlateShow{ 13 width: 750rpx; 14 min-height: 100%; 15 position: absolute; 16 bottom: 0; 17 } 18 19 .licensePlate_Bg{ 20 min-height: 100%; 21 width: 750rpx; 22 position: absolute; 23 z-index: 40; 24 overflow: hidden; 25 } 26 27 .licensePlate_provinces_Box{ 28 width: 750rpx; 29 background-color: #d0d4da; 30 margin: 0 auto; 31 position: absolute; 32 bottom: 0; 33 display: flex; 34 display: -webkit-flex; 35 flex-wrap: wrap; 36 justify-content: flex-start; 37 /* border-top: 1px solid #abb2bd; */ 38 z-index: 55; 39 } 40 41 .licensePlate_provincesTist{ 42 flex:15%; 43 height: 100rpx; 44 line-height: 100rpx; 45 margin: 0 auto; 46 text-align: center; 47 background-color:#ffffff; 48 border-top: 1px solid #abb2bd; 49 border-left: 1px solid #abb2bd; 50 } 51 52 .licensePlate_provincesTist:nth-child(6n){ 53 border-right: 1px solid #abb2bd; 54 } 55 56 .licensePlate_letter_Box{ 57 width: 750rpx; 58 background-color: #d0d4da; 59 margin: 0 auto; 60 position: absolute; 61 bottom: 0; 62 display: flex; 63 display: -webkit-flex; 64 flex-wrap: wrap; 65 justify-content: flex-start; 66 /* border-top: 1px solid #abb2bd; */ 67 z-index: 55; 68 } 69 70 .licensePlate_letterTist{ 71 flex:15%; 72 height: 100rpx; 73 line-height: 100rpx; 74 margin: 0 auto; 75 text-align: center; 76 background-color:#ffffff; 77 border-top: 1px solid #abb2bd; 78 border-left: 1px solid #abb2bd; 79 } 80 81 .licensePlate_letterTist:nth-child(6n){ 82 border-right: 1px solid #abb2bd; 83 } 84 85 .licensePlate_letterTist:nth-child(26){ 86 border-right: 1px solid #abb2bd; 87 } 88 89 .licensePlate_letterTist_but{ 90 width: 750rpx; 91 display: flex; 92 display: -webkit-flex; 93 flex-wrap: wrap; 94 justify-content: flex-start; 95 } 96 97 .licensePlate_digital_Box{ 98 width: 750rpx; 99 background-color: #d0d4da; 100 margin: 0 auto; 101 position: absolute; 102 bottom: 0; 103 display: flex; 104 display: -webkit-flex; 105 flex-wrap: wrap; 106 justify-content: flex-start; 107 /* border-top: 1px solid #abb2bd; */ 108 z-index: 55; 109 } 110 111 .licensePlate_digitalTist{ 112 flex:25%; 113 height: 125rpx; 114 line-height: 125rpx; 115 margin: 0 auto; 116 text-align: center; 117 background-color:#ffffff; 118 border-top: 1px solid #abb2bd; 119 border-left: 1px solid #abb2bd; 120 } 121 122 .licensePlate_digital_but{ 123 width: 750rpx; 124 display: flex; 125 display: -webkit-flex; 126 flex-wrap: wrap; 127 justify-content: flex-start; 128 } 129 130 .licensePlate_but{ 131 flex: 1; 132 height: 100rpx; 133 line-height: 100rpx; 134 text-align: center; 135 color: #ffffff; 136 background-color:#ff6600; 137 border-top: 1px solid #abb2bd; 138 border-left: 1px solid #abb2bd; 139 } 140 141 .licensePlate_but:last-child{ 142 border-right: 1px solid #abb2bd; 143 } 144 145 .LicensePlateNumber{ 146 width: 750rpx; 147 height: 200rpx; 148 border-bottom: 1rpx solid #abb2bd 149 }
js：
1 Page({ 2 3 data: { 4 licensePlateShowHidden:true, 5 licensePlate_provinces_Box:true, 6 licensePlate_letter_Box: true, 7 licensePlate_digital_Box: true, 8 licensePlate_provinces: [ 9 "京", "沪", "浙", "苏", "粤", "鲁", 10 "晋", "冀", "豫", "川", "渝", "辽", 11 "吉", "黑", "皖", "鄂", "津", "贵", 12 "云", "桂", "琼", "青", "新", "藏", 13 "蒙", "宁", "甘", "陕", "闽", "赣", 14 "湘" 15 ], 16 licensePlate_letter: [ 17 "A", "B", "C", "D", "E", "F", 18 "G", "H", "L", "J", "K", "L", 19 "M", "N", "O", "P", "Q", "R", 20 "S", "T", "U", "V", "W", "X", 21 "Y", "Z" 22 ], 23 licensePlate_digital: [ 24 "1", "2", "3", 25 "4", "5", "6", 26 "7", "8", "9", 27 "0" 28 ], 29 LicensePlateNumber:'', 30 }, 31 32 // 显示模拟键盘 33 LicensePlateNumber:function(){ 34 var that = this; 35 var LicensePlateNumber = this.data.LicensePlateNumber; 36 var LicensePlateNumberLen = LicensePlateNumber.length; 37 console.log(LicensePlateNumber, LicensePlateNumberLen) 38 if (LicensePlateNumberLen == 0){ 39 this.setData({ 40 licensePlateShowHidden: false, 41 licensePlate_provinces_Box: false, 42 }) 43 } else if (LicensePlateNumberLen == 1){ 44 this.setData({ 45 licensePlateShowHidden: false, 46 licensePlate_letter_Box: false, 47 }) 48 }else{ 49 this.setData({ 50 licensePlateShowHidden: false, 51 licensePlate_digital_Box: false, 52 }) 53 } 54 55 }, 56 57 // 切换成字母 58 licensePlate_switchLetter:function(){ 59 this.setData({ 60 licensePlate_provinces_Box:true, 61 licensePlate_letter_Box:false, 62 licensePlate_digital_Box: true, 63 }) 64 }, 65 66 // 切换成数字 67 licensePlate_switchDigital: function () { 68 var LicensePlateNumber = this.data.LicensePlateNumber; 69 var LicensePlateNumberLen = LicensePlateNumber.length; 70 if (LicensePlateNumberLen == 1){ 71 wx.showToast({ 72 title: '车牌号码第二位必须是字母', 73 icon: 'none', 74 duration: 1500, 75 }) 76 }else{ 77 this.setData({ 78 licensePlate_provinces_Box: true, 79 licensePlate_letter_Box: true, 80 licensePlate_digital_Box: false, 81 }) 82 } 83 }, 84 85 86 // 删除 87 licensePlate_delete: function (e) { 88 var LicensePlateNumber = this.data.LicensePlateNumber; 89 var LicensePlateNumberLen = LicensePlateNumber.length; 90 var LicensePlateNumberDelete = LicensePlateNumber.split(''); 91 var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(0,-1) 92 if (LicensePlateNumberDelete.slice(0,-1).length == 1){ 93 this.setData({ 94 licensePlate_provinces_Box: true, 95 licensePlate_letter_Box: false, 96 licensePlate_digital_Box: true, 97 }) 98 } else if (LicensePlateNumberLen == 0 || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(0, -1).length == 0){ 99 this.setData({ 100 licensePlate_provinces_Box: false, 101 licensePlate_letter_Box: true, 102 licensePlate_digital_Box: true, 103 }) 104 } 105 this.setData({ 106 LicensePlateNumber: NewLicensePlateNumber 107 }) 108 }, 109 110 // 清空 111 licensePlate_empty: function (e) { 112 this.setData({ 113 LicensePlateNumber:'', 114 licensePlate_provinces_Box: false, 115 licensePlate_letter_Box: true, 116 licensePlate_digital_Box: true, 117 }) 118 }, 119 120 // 关闭模拟键盘 121 licensePlate_close:function(){ 122 this.setData({ 123 licensePlateShowHidden: true 124 }) 125 }, 126 127 // 点击获取省份 128 licensePlate_provinces: function (e) { 129 this.setData({ 130 LicensePlateNumber: e.target.dataset.licenseplateprovinces, 131 licensePlate_letter_Box: false, 132 licensePlate_digital_Box: true, 133 }) 134 console.log(e.target.dataset.licenseplateprovinces) 135 }, 136 137 // 点击获取字母 138 licensePlate_letter: function (e) { 139 var LicensePlateNumber = this.data.LicensePlateNumber; 140 var LicensePlateNumberLen = LicensePlateNumber.length; 141 if (LicensePlateNumberLen != 8) { 142 this.setData({ 143 LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces 144 }) 145 console.log(e.target.dataset.licenseplateprovinces) 146 } else { 147 wx.showToast({ 148 title: '车牌号码最多不能超过8位', 149 icon: 'none', 150 duration: 1500, 151 }) 152 } 153 }, 154 155 // 点击获取数字 156 licensePlate_digital: function (e) { 157 var LicensePlateNumber = this.data.LicensePlateNumber; 158 var LicensePlateNumberLen = LicensePlateNumber.length; 159 if (LicensePlateNumberLen != 8){ 160 this.setData({ 161 LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces 162 }) 163 console.log(e.target.dataset.licenseplateprovinces) 164 }else{ 165 wx.showToast({ 166 title: '车牌号码最多不能超过8位', 167 icon:'none', 168 duration:1500, 169 }) 170 } 171 }, 172 173 174 })
噢了。
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
