WeChat applet meter number analog keyboard input function implementation code

first wave to preview.

Preview image a:

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

Preview Figure 2:

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

Preview Figure III :

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

preview Figure 4:

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

preview Figure 5:

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

about an effect similar to the original FIG.

ideas Analysis: license plate number of 31 characters, 26 letters, 10 digits, beginning from the first one referred to the provinces of Chinese characters, the second letter differentiate according to the city or region in the province last the five or six, is composed of letters and numbers, a total of seven and eight of the license plate number plate number, (Note: where the eight-digit registration number, the vehicle registration number energy)

logical thinking about, what does not contain a code to get the value of the verification or other instructions detailed look at the code fragment.

First, prototype design ideas: to design a good analog keyboard about architecture, style. Here three different simulated keyboard structure together, segment as characters, letters, numbers, which form uniform;

Second: Thinking interaction data: data needed to bind or modify filling, etc., how to obtain, by what means get, no matter how out of feedback, about the need to build a model of good passes back and forth interaction data;

third, the idea of ​​interactive experience: a trigger or an enter in the input box when, starting simulated keyboard, first with character selection, followed by the letter, and finally by alphanumeric, three framework needs to be sorted to sort out;

operation of ideas

fourth, the function: simulated keyboard functional buttons, such as switching between numbers and letters, and remove the last bit of data, clear all data and status, and other closed end of the operation experience.

Fifth: input judgment idea: Analyzing digit license plate number inputs, what the first and second branches is determined to switch the letters and numbers. To deleteThe first few are what kind of state input is needed.

Probably this is like this, how to write more words, feel the superline, if there is a wrong place, hope that the message is correct.

WXML:

           {ip}}   closed        Delete   Clear   Close    {{Item}}    Letter   Delete   Clear   Close      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; flex-wrap: wrap; justify-content: flex-start; / * border-top: px solid #abbbd; * / z-index: } .licenseplate_ProvincesTist: rpx; line-height: rpx; margin: auto; text-align: center; background-color: #ffff; border-top: px solid #abbbbd; 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; Justify-Content: flex-start; / * border-top: px solid #abbbd; * / z-index:;} .licenseplate_letartist {flex:%; height: rpx; Line-height: rpx; margin: auto; text-align: center; background-color: #ffffff; border-top: px solid #abbbbd; border-left: px solid #abbbd;} .licenseplate_letartist: 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;} .licenseplate_digital_box {width: rpx; background-color: #ddda; margin: auto; position: absolute; kettom:; 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: center; background-color: center; background-color: center #fffff; 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; layer-height: rpx; text-align: center; color: #ffff; background-color: #f; 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: [ “Beijing”, “Shanghai”, “Zhejiang”, “SU”, “Yue”, “Lu”, “Jin” “”, “Yu”, “Sichuan”, “渝”, “Liao”, “Ji”, “Black”, “”, “津”, “津”, “expensive”, “cloud”, “桂” “” Joan “,” Qing “,” New “,” Tibet “,” Meng “,” Ning “,” Gan “,” Shaan “,” “,” “,” 湘 “], 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: [“,”, “,”, “,”, “,”, “,”,}, // display simulation Keyboard licenseplatenumber: function () {var there = 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,})}}, // switch to letters licensePlate_switchLetter: function () {this.setData ({licensePlate_provinces_Box: true, licensePlate_letter_Box: false, licensePlate_digital_Box: true,})}, // switch to digital licensePlate_switchDigital: function () {var LicensePlateNumber = this.data.LicensePlateNumber; var LicensePlateNumberLen = LicensePlateNumber.length; if (LicensePlateNumberLen==) {wx.showToast ({title: ‘the second license number must be a letter’, icon: ‘none’, duration:,})} else {this.setData ({licensePlate_provinces_Box: true, licensePlate_letter_Box: true, licensePlate_digital_Box : false,})}}, // delete 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 == ‘|| licenseplateNumberdel. Ete.slice (, -) length ==) {this.setData ({licensePlate_provinces_Box: false, licensePlate_letter_Box: true, licensePlate_digital_Box: true,})} this.setData ({LicensePlateNumber: NewLicensePlateNumber})}, // empty licensePlate_empty: function (e) {this.setData ({LicensePlateNumber: ”, licensePlate_provinces_Box: false, licensePlate_letter_Box: true, licensePlate_digital_Box: true,})}, // Close simulated keyboard licensePlate_close: function () {this.setData ({licensePlateShowHidden: true })} // click for province 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}}}, // Click to get the wordMother 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: ‘license plate number can not exceed bit’, icon: ‘none’, duration:,}}}, // Click to get digital 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: ‘license plate number can not exceed bit’, icon: ‘none’, duration:,})}},}

Summary
  The above is the implementation code for the WeChat applet to the WeChat applet to introduce the WeChat applet. I hope that everyone can help, if you have any questions, please I leave a message, the small package will reply to everyone in time!  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment