先來(lái)一波預(yù)覽圖。
預(yù)覽圖片一：
預(yù)覽圖二：
預(yù)覽圖三：
預(yù)覽圖四：
預(yù)覽圖五：
大概的效果就和原來(lái)圖差不多。
思路解析：車牌號(hào)碼由31位漢字，26位字母，10位數(shù)字組成的，開(kāi)頭第一位由省份簡(jiǎn)稱的漢字，第二位字母根據(jù)省份下的城市或地區(qū)區(qū)分，最后的五位或者六位，是有字母和數(shù)字組成的，共有七位的車牌號(hào)碼和八位的車牌號(hào)碼，（注：其中的八位數(shù)的車牌號(hào)碼為能源車的車牌號(hào)碼。）
大概的邏輯思維，不包含代碼獲取值什么的或者驗(yàn)證其他的說(shuō)明，詳細(xì)看代碼片段。
第一，原型的設(shè)計(jì)思路：先設(shè)計(jì)好模擬鍵盤(pán)的大概架構(gòu)，樣式。這里的分為三個(gè)不同的模擬鍵盤(pán)結(jié)構(gòu)合在一起，分部為漢字，字母，數(shù)字，其樣式統(tǒng)一；
第二：數(shù)據(jù)的交互思路：對(duì)需要的數(shù)據(jù)綁定或者修改填充等，如何獲取，通過(guò)什么方式獲取，再怎么反饋出來(lái)，需要搭建好數(shù)據(jù)的來(lái)回交互傳遞的大概模型；
第三，交互的體驗(yàn)思路：觸發(fā)或者在輸入框點(diǎn)擊輸入的時(shí)候，啟動(dòng)模擬鍵盤(pán)，先用漢字選擇，其次是字母，最后由字母和數(shù)字混合，對(duì)三個(gè)架構(gòu)先進(jìn)行需求排序的理清；
第四，功能的操作思路：模擬鍵盤(pán)的功能性按鈕，比如數(shù)字與字母之間的的切換，刪除最后一位數(shù)據(jù)，清空全部數(shù)據(jù)和狀態(tài)，關(guān)閉的結(jié)束等操作等體驗(yàn)。
第五：輸入判斷的思路：判斷車牌號(hào)碼輸入的位數(shù)，第一位和第二位分部是什么，字母與數(shù)字的切換的判斷。刪除到第幾位需要在什么樣的狀態(tài)輸入下等。
大概就這這些樣子了，能寫(xiě)怎么多字，感覺(jué)都超綱了，如果有錯(cuò)的地方，還望留言指正。
最后是源碼：
wxml：
<view class='page wrapper'> <view class="weui-cell__bd"> <view bindtap='LicensePlateNumber' class='LicensePlateNumber'> <input value='{{LicensePlateNumber}}' disabled='true' placeholder='請(qǐng)選擇'></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'>關(guān)閉</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'>數(shù)字</view> <view class='licensePlate_but' bindtap='licensePlate_delete'>刪除</view> <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view> <view class='licensePlate_but' bindtap='licensePlate_close'>關(guān)閉</view> </view> </view> <!-- 數(shù)字 --> <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'>關(guān)閉</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:'', }, // 顯示模擬鍵盤(pán) 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, }) }, // 切換成數(shù)字 licensePlate_switchDigital: function () { var LicensePlateNumber = this.data.LicensePlateNumber; var LicensePlateNumberLen = LicensePlateNumber.length; if (LicensePlateNumberLen == ){ wx.showToast({ title: '車牌號(hào)碼第二位必須是字母', 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, }) }, // 關(guān)閉模擬鍵盤(pán) licensePlate_close:function(){ this.setData({ licensePlateShowHidden: true }) }, // 點(diǎn)擊獲取省份 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) }, // 點(diǎn)擊獲取字母 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: '車牌號(hào)碼最多不能超過(guò)位', icon: 'none', duration: , }) } }, // 點(diǎn)擊獲取數(shù)字 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: '車牌號(hào)碼最多不能超過(guò)位', icon:'none', duration:, }) } }, })總結(jié)
以上所述是小編給大家介紹的微信小程序車牌號(hào)碼模擬鍵盤(pán)輸入功能的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
