微信小程式車牌號碼模擬鍵盤輸入
未經允許,禁止轉載,抄襲,如需借鑑參考等,請附上該文章連線。
相關資料參考: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{ 4min-height:100%; 5 } 6 7 .wrapper{ 8width: 750rpx; 9overflow:hidden; 10 } 11 12 .licensePlateShow{ 13width: 750rpx; 14min-height: 100%; 15position: absolute; 16bottom: 0; 17 } 18 19 .licensePlate_Bg{ 20min-height: 100%; 21width: 750rpx; 22position: absolute; 23z-index: 40; 24overflow: hidden; 25 } 26 27 .licensePlate_provinces_Box{ 28width: 750rpx; 29background-color: #d0d4da; 30margin: 0 auto; 31position: absolute; 32bottom: 0; 33display: flex; 34display: -webkit-flex; 35flex-wrap: wrap; 36justify-content: flex-start; 37/* border-top: 1px solid #abb2bd; */ 38z-index: 55; 39 } 40 41 .licensePlate_provincesTist{ 42flex:15%; 43height: 100rpx; 44line-height: 100rpx; 45margin: 0 auto; 46text-align: center; 47background-color:#ffffff; 48border-top: 1px solid #abb2bd; 49border-left: 1px solid #abb2bd; 50 } 51 52 .licensePlate_provincesTist:nth-child(6n){ 53border-right: 1px solid #abb2bd; 54 } 55 56 .licensePlate_letter_Box{ 57width: 750rpx; 58background-color: #d0d4da; 59margin: 0 auto; 60position: absolute; 61bottom: 0; 62display: flex; 63display: -webkit-flex; 64flex-wrap: wrap; 65justify-content: flex-start; 66/* border-top: 1px solid #abb2bd; */ 67z-index: 55; 68 } 69 70 .licensePlate_letterTist{ 71flex:15%; 72height: 100rpx; 73line-height: 100rpx; 74margin: 0 auto; 75text-align: center; 76background-color:#ffffff; 77border-top: 1px solid #abb2bd; 78border-left: 1px solid #abb2bd; 79 } 80 81 .licensePlate_letterTist:nth-child(6n){ 82border-right: 1px solid #abb2bd; 83 } 84 85 .licensePlate_letterTist:nth-child(26){ 86border-right: 1px solid #abb2bd; 87 } 88 89 .licensePlate_letterTist_but{ 90width: 750rpx; 91display: flex; 92display: -webkit-flex; 93flex-wrap: wrap; 94justify-content: flex-start; 95 } 96 97 .licensePlate_digital_Box{ 98width: 750rpx; 99background-color: #d0d4da; 100margin: 0 auto; 101position: absolute; 102bottom: 0; 103display: flex; 104display: -webkit-flex; 105flex-wrap: wrap; 106justify-content: flex-start; 107/* border-top: 1px solid #abb2bd; */ 108z-index: 55; 109 } 110 111 .licensePlate_digitalTist{ 112flex:25%; 113height: 125rpx; 114line-height: 125rpx; 115margin: 0 auto; 116text-align: center; 117background-color:#ffffff; 118border-top: 1px solid #abb2bd; 119border-left: 1px solid #abb2bd; 120 } 121 122 .licensePlate_digital_but{ 123width: 750rpx; 124display: flex; 125display: -webkit-flex; 126flex-wrap: wrap; 127justify-content: flex-start; 128 } 129 130 .licensePlate_but{ 131flex: 1; 132height: 100rpx; 133line-height: 100rpx; 134text-align: center; 135color: #ffffff; 136background-color:#ff6600; 137border-top: 1px solid #abb2bd; 138border-left: 1px solid #abb2bd; 139 } 140 141 .licensePlate_but:last-child{ 142border-right: 1px solid #abb2bd; 143 } 144 145 .LicensePlateNumber{ 146width: 750rpx; 147height: 200rpx; 148border-bottom: 1rpx solid #abb2bd 149 }
js:
1 Page({ 2 3data: { 4licensePlateShowHidden:true, 5licensePlate_provinces_Box:true, 6licensePlate_letter_Box: true, 7licensePlate_digital_Box: true, 8licensePlate_provinces: [ 9"京", "滬", "浙", "蘇", "粵", "魯", 10"晉", "冀", "豫", "川", "渝", "遼", 11"吉", "黑", "皖", "鄂", "津", "貴", 12"雲", "桂", "瓊", "青", "新", "藏", 13"蒙", "寧", "甘", "陝", "閩", "贛", 14"湘" 15], 16licensePlate_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], 23licensePlate_digital: [ 24"1", "2", "3", 25"4", "5", "6", 26"7", "8", "9", 27"0" 28], 29LicensePlateNumber:'', 30}, 31 32// 顯示模擬鍵盤 33LicensePlateNumber:function(){ 34var that = this; 35var LicensePlateNumber = this.data.LicensePlateNumber; 36var LicensePlateNumberLen = LicensePlateNumber.length; 37console.log(LicensePlateNumber, LicensePlateNumberLen) 38if (LicensePlateNumberLen == 0){ 39this.setData({ 40licensePlateShowHidden: false, 41licensePlate_provinces_Box: false, 42}) 43} else if (LicensePlateNumberLen == 1){ 44this.setData({ 45licensePlateShowHidden: false, 46licensePlate_letter_Box: false, 47}) 48}else{ 49this.setData({ 50licensePlateShowHidden: false, 51licensePlate_digital_Box: false, 52}) 53} 54 55}, 56 57// 切換成字母 58licensePlate_switchLetter:function(){ 59this.setData({ 60licensePlate_provinces_Box:true, 61licensePlate_letter_Box:false, 62licensePlate_digital_Box: true, 63}) 64}, 65 66// 切換成數字 67licensePlate_switchDigital: function () { 68var LicensePlateNumber = this.data.LicensePlateNumber; 69var LicensePlateNumberLen = LicensePlateNumber.length; 70if (LicensePlateNumberLen == 1){ 71wx.showToast({ 72title: '車牌號碼第二位必須是字母', 73icon: 'none', 74duration: 1500, 75}) 76}else{ 77this.setData({ 78licensePlate_provinces_Box: true, 79licensePlate_letter_Box: true, 80licensePlate_digital_Box: false, 81}) 82} 83}, 84 85 86// 刪除 87licensePlate_delete: function (e) { 88var LicensePlateNumber = this.data.LicensePlateNumber; 89var LicensePlateNumberLen = LicensePlateNumber.length; 90var LicensePlateNumberDelete = LicensePlateNumber.split(''); 91var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(0,-1) 92if (LicensePlateNumberDelete.slice(0,-1).length == 1){ 93this.setData({ 94licensePlate_provinces_Box: true, 95licensePlate_letter_Box: false, 96licensePlate_digital_Box: true, 97}) 98} else if (LicensePlateNumberLen == 0 || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(0, -1).length == 0){ 99this.setData({ 100licensePlate_provinces_Box: false, 101licensePlate_letter_Box: true, 102licensePlate_digital_Box: true, 103}) 104} 105this.setData({ 106LicensePlateNumber: NewLicensePlateNumber 107}) 108}, 109 110// 清空 111licensePlate_empty: function (e) { 112this.setData({ 113LicensePlateNumber:'', 114licensePlate_provinces_Box: false, 115licensePlate_letter_Box: true, 116licensePlate_digital_Box: true, 117}) 118}, 119 120// 關閉模擬鍵盤 121licensePlate_close:function(){ 122this.setData({ 123licensePlateShowHidden: true 124}) 125}, 126 127// 點選獲取省份 128licensePlate_provinces: function (e) { 129this.setData({ 130LicensePlateNumber: e.target.dataset.licenseplateprovinces, 131licensePlate_letter_Box: false, 132licensePlate_digital_Box: true, 133}) 134console.log(e.target.dataset.licenseplateprovinces) 135}, 136 137// 點選獲取字母 138licensePlate_letter: function (e) { 139var LicensePlateNumber = this.data.LicensePlateNumber; 140var LicensePlateNumberLen = LicensePlateNumber.length; 141if (LicensePlateNumberLen != 8) { 142this.setData({ 143LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces 144}) 145console.log(e.target.dataset.licenseplateprovinces) 146} else { 147wx.showToast({ 148title: '車牌號碼最多不能超過8位', 149icon: 'none', 150duration: 1500, 151}) 152} 153}, 154 155// 點選獲取數字 156licensePlate_digital: function (e) { 157var LicensePlateNumber = this.data.LicensePlateNumber; 158var LicensePlateNumberLen = LicensePlateNumber.length; 159if (LicensePlateNumberLen != 8){ 160this.setData({ 161LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces 162}) 163console.log(e.target.dataset.licenseplateprovinces) 164}else{ 165wx.showToast({ 166title: '車牌號碼最多不能超過8位', 167icon:'none', 168duration:1500, 169}) 170} 171}, 172 173 174 })
噢了。