经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序车牌号码模拟键盘输入功能的实现代码
来源:jb51  时间:2018/11/12 10:06:47  对本文有异议

先来一波预览图。

预览图片一:

预览图二:

预览图三:

 预览图四:

预览图五:

 大概的效果就和原来图差不多。

思路解析:车牌号码由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. </view>
  6. </view>
  7. <view>
  8. <view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'>
  9. <!-- 遮罩层 -->
  10. <view class='licensePlate_Bg' bindtap='licensePlate_close'>
  11. </view>
  12. <!-- 省份 -->
  13. <view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'>
  14. <view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
  15. <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
  16. </view>
  17. <!-- 字母 -->
  18. <view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'>
  19. <view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
  20. <view class='licensePlate_letterTist_but'>
  21. <view class='licensePlate_but' bindtap='licensePlate_switchDigital'>数字</view>
  22. <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
  23. <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
  24. <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
  25. </view>
  26. </view>
  27. <!-- 数字 -->
  28. <view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'>
  29. <view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>
  30. <view class='licensePlate_digital_but'>
  31. <view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view>
  32. <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>
  33. <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>
  34. <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. </view>

wxss:

  

  1. @import "weui.wxss";
  2. page{
  3. min-height:%;
  4. }
  5. .wrapper{
  6. width: rpx;
  7. overflow:hidden;
  8. }
  9. .licensePlateShow{
  10. width: rpx;
  11. min-height: %;
  12. position: absolute;
  13. bottom: ;
  14. }
  15. .licensePlate_Bg{
  16. min-height: %;
  17. width: rpx;
  18. position: absolute;
  19. z-index: ;
  20. overflow: hidden;
  21. }
  22. .licensePlate_provinces_Box{
  23. width: rpx;
  24. background-color: #ddda;
  25. margin: auto;
  26. position: absolute;
  27. bottom: ;
  28. display: flex;
  29. display: -webkit-flex;
  30. flex-wrap: wrap;
  31. justify-content: flex-start;
  32. /* border-top: px solid #abbbd; */
  33. z-index: ;
  34. }
  35. .licensePlate_provincesTist{
  36. flex:%;
  37. height: rpx;
  38. line-height: rpx;
  39. margin: auto;
  40. text-align: center;
  41. background-color:#ffffff;
  42. border-top: px solid #abbbd;
  43. border-left: px solid #abbbd;
  44. }
  45. .licensePlate_provincesTist:nth-child(n){
  46. border-right: px solid #abbbd;
  47. }
  48. .licensePlate_letter_Box{
  49. width: rpx;
  50. background-color: #ddda;
  51. margin: auto;
  52. position: absolute;
  53. bottom: ;
  54. display: flex;
  55. display: -webkit-flex;
  56. flex-wrap: wrap;
  57. justify-content: flex-start;
  58. /* border-top: px solid #abbbd; */
  59. z-index: ;
  60. }
  61. .licensePlate_letterTist{
  62. flex:%;
  63. height: rpx;
  64. line-height: rpx;
  65. margin: auto;
  66. text-align: center;
  67. background-color:#ffffff;
  68. border-top: px solid #abbbd;
  69. border-left: px solid #abbbd;
  70. }
  71. .licensePlate_letterTist:nth-child(n){
  72. border-right: px solid #abbbd;
  73. }
  74. .licensePlate_letterTist:nth-child(){
  75. border-right: px solid #abbbd;
  76. }
  77. .licensePlate_letterTist_but{
  78. width: rpx;
  79. display: flex;
  80. display: -webkit-flex;
  81. flex-wrap: wrap;
  82. justify-content: flex-start;
  83. }
  84. .licensePlate_digital_Box{
  85. width: rpx;
  86. background-color: #ddda;
  87. margin: auto;
  88. position: absolute;
  89. bottom: ;
  90. display: flex;
  91. display: -webkit-flex;
  92. flex-wrap: wrap;
  93. justify-content: flex-start;
  94. /* border-top: px solid #abbbd; */
  95. z-index: ;
  96. }
  97. .licensePlate_digitalTist{
  98. flex:%;
  99. height: rpx;
  100. line-height: rpx;
  101. margin: auto;
  102. text-align: center;
  103. background-color:#ffffff;
  104. border-top: px solid #abbbd;
  105. border-left: px solid #abbbd;
  106. }
  107. .licensePlate_digital_but{
  108. width: rpx;
  109. display: flex;
  110. display: -webkit-flex;
  111. flex-wrap: wrap;
  112. justify-content: flex-start;
  113. }
  114. .licensePlate_but{
  115. flex: ;
  116. height: rpx;
  117. line-height: rpx;
  118. text-align: center;
  119. color: #ffffff;
  120. background-color:#ff;
  121. border-top: px solid #abbbd;
  122. border-left: px solid #abbbd;
  123. }
  124. .licensePlate_but:last-child{
  125. border-right: px solid #abbbd;
  126. }
  127. .LicensePlateNumber{
  128. width: rpx;
  129. height: rpx;
  130. border-bottom: rpx solid #abbbd
  131. }

js:

  

  1. Page({
  2. data: {
  3. licensePlateShowHidden:true,
  4. licensePlate_provinces_Box:true,
  5. licensePlate_letter_Box: true,
  6. licensePlate_digital_Box: true,
  7. licensePlate_provinces: [
  8. "京", "沪", "浙", "苏", "粤", "鲁",
  9. "晋", "冀", "豫", "川", "渝", "辽",
  10. "吉", "黑", "皖", "鄂", "津", "贵",
  11. "云", "桂", "琼", "青", "新", "藏",
  12. "蒙", "宁", "甘", "陕", "闽", "赣",
  13. "湘"
  14. ],
  15. licensePlate_letter: [
  16. "A", "B", "C", "D", "E", "F",
  17. "G", "H", "L", "J", "K", "L",
  18. "M", "N", "O", "P", "Q", "R",
  19. "S", "T", "U", "V", "W", "X",
  20. "Y", "Z"
  21. ],
  22. licensePlate_digital: [
  23. "", "", "",
  24. "", "", "",
  25. "", "", "",
  26. ""
  27. ],
  28. LicensePlateNumber:'',
  29. },
  30. // 显示模拟键盘
  31. LicensePlateNumber:function(){
  32. var that = this;
  33. var LicensePlateNumber = this.data.LicensePlateNumber;
  34. var LicensePlateNumberLen = LicensePlateNumber.length;
  35. console.log(LicensePlateNumber, LicensePlateNumberLen)
  36. if (LicensePlateNumberLen == ){
  37. this.setData({
  38. licensePlateShowHidden: false,
  39. licensePlate_provinces_Box: false,
  40. })
  41. } else if (LicensePlateNumberLen == ){
  42. this.setData({
  43. licensePlateShowHidden: false,
  44. licensePlate_letter_Box: false,
  45. })
  46. }else{
  47. this.setData({
  48. licensePlateShowHidden: false,
  49. licensePlate_digital_Box: false,
  50. })
  51. }
  52. },
  53. // 切换成字母
  54. licensePlate_switchLetter:function(){
  55. this.setData({
  56. licensePlate_provinces_Box:true,
  57. licensePlate_letter_Box:false,
  58. licensePlate_digital_Box: true,
  59. })
  60. },
  61. // 切换成数字
  62. licensePlate_switchDigital: function () {
  63. var LicensePlateNumber = this.data.LicensePlateNumber;
  64. var LicensePlateNumberLen = LicensePlateNumber.length;
  65. if (LicensePlateNumberLen == ){
  66. wx.showToast({
  67. title: '车牌号码第二位必须是字母',
  68. icon: 'none',
  69. duration: ,
  70. })
  71. }else{
  72. this.setData({
  73. licensePlate_provinces_Box: true,
  74. licensePlate_letter_Box: true,
  75. licensePlate_digital_Box: false,
  76. })
  77. }
  78. },
  79. // 删除
  80. licensePlate_delete: function (e) {
  81. var LicensePlateNumber = this.data.LicensePlateNumber;
  82. var LicensePlateNumberLen = LicensePlateNumber.length;
  83. var LicensePlateNumberDelete = LicensePlateNumber.split('');
  84. var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(,-)
  85. if (LicensePlateNumberDelete.slice(,-).length == ){
  86. this.setData({
  87. licensePlate_provinces_Box: true,
  88. licensePlate_letter_Box: false,
  89. licensePlate_digital_Box: true,
  90. })
  91. } else if (LicensePlateNumberLen == || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(, -).length == ){
  92. this.setData({
  93. licensePlate_provinces_Box: false,
  94. licensePlate_letter_Box: true,
  95. licensePlate_digital_Box: true,
  96. })
  97. }
  98. this.setData({
  99. LicensePlateNumber: NewLicensePlateNumber
  100. })
  101. },
  102. // 清空
  103. licensePlate_empty: function (e) {
  104. this.setData({
  105. LicensePlateNumber:'',
  106. licensePlate_provinces_Box: false,
  107. licensePlate_letter_Box: true,
  108. licensePlate_digital_Box: true,
  109. })
  110. },
  111. // 关闭模拟键盘
  112. licensePlate_close:function(){
  113. this.setData({
  114. licensePlateShowHidden: true
  115. })
  116. },
  117. // 点击获取省份
  118. licensePlate_provinces: function (e) {
  119. this.setData({
  120. LicensePlateNumber: e.target.dataset.licenseplateprovinces,
  121. licensePlate_letter_Box: false,
  122. licensePlate_digital_Box: true,
  123. })
  124. console.log(e.target.dataset.licenseplateprovinces)
  125. },
  126. // 点击获取字母
  127. licensePlate_letter: function (e) {
  128. var LicensePlateNumber = this.data.LicensePlateNumber;
  129. var LicensePlateNumberLen = LicensePlateNumber.length;
  130. if (LicensePlateNumberLen != ) {
  131. this.setData({
  132. LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
  133. })
  134. console.log(e.target.dataset.licenseplateprovinces)
  135. } else {
  136. wx.showToast({
  137. title: '车牌号码最多不能超过位',
  138. icon: 'none',
  139. duration: ,
  140. })
  141. }
  142. },
  143. // 点击获取数字
  144. licensePlate_digital: function (e) {
  145. var LicensePlateNumber = this.data.LicensePlateNumber;
  146. var LicensePlateNumberLen = LicensePlateNumber.length;
  147. if (LicensePlateNumberLen != ){
  148. this.setData({
  149. LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces
  150. })
  151. console.log(e.target.dataset.licenseplateprovinces)
  152. }else{
  153. wx.showToast({
  154. title: '车牌号码最多不能超过位',
  155. icon:'none',
  156. duration:,
  157. })
  158. }
  159. },
  160. })

总结

以上所述是小编给大家介绍的微信小程序车牌号码模拟键盘输入功能的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号