微信小程序车牌号码模拟键盘输入
微信小程序车牌号码模拟键盘输入练习,
未经允许,禁止转载,抄袭,如需借鉴参考等,请附上该文章连接。
相关资料参考: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 })
噢了。
上一篇: 判断星座