微信小程序车牌键盘

发布时间：2020-12-14 19:40:15 所属栏目：资源来源：网络整理

导读：项目背景公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。效果图如下省份简写键盘如下: 省份简写键盘英文简写键盘如下: 英文简写键盘源代码目

项目背景

公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。

效果图如下

省份简写键盘如下:

省份简写键盘

英文简写键盘如下:

英文简写键盘

源代码

目录结构

wxml文件内容




<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">



  <!--省份简写键盘-->



  <block wx:"{{keyBoardType === 1}}">



    <view "vehicle-panel-row">



      <view hover-"vehicle-hover" hover-start-time="10" hover-stay-time="100" 'vehicle-panel-row-button' style="border:{{buttonBorder}}" wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>



    </view>



    <view 
      <view hover-"{{keyVehicle2}}" bindtap=
    </view>



    <view 
      <view hover-"{{keyVehicle3}}" bindtap=
    </view>



    <view "vehicle-panel-row-last">



      <view hover-'vehicle-panel-row-button vehicle-panel-row-button-last' bindtap="{{keyVehicle4}}" style=
    </view>



  </block>



  <!--英文键盘  -->



  <block wx:else>



    <view 
      <view hover-'vehicle-panel-row-button vehicle-panel-row-button-number' bindtap="{{keyNumber}}" style="item">{{item}}</view>



    </view>



    <view 
      <view hover-"{{keyEnInput1}}" bindtap="idx"  wx:key=
    </view>



    <view 
      <view hover-"{{keyEnInput2}}" bindtap=
      <view hover-"vehicle-hover" style="border:{{buttonBorder}}" hover-start-time='vehicle-panel-row-button vehicle-panel-row-button-img'>



        <image src='./delete.svg' 'vehicle-en-button-delete' bindtap="delete" mode='aspectFit'>删除</image>



      </view>



    </view>



    <view 
      <view hover-'vehicleTap' style="border:{{buttonBorder}}" data-"{{keyEnInput3}}" wx:
      <view hover-'vehicle-panel-row-button vehicle-panel-ok' bindtap="ok">确定</view>



    </view>



  </block>



</view>

json文件




{



  "component": true




}

js文件

],



 



  properties: {



    isShow: {



      type: Boolean,197);">
      value: false,197);">
    },197);">
    buttonBorder: {



      String,197);">
      value: "1px solid #ccc"




    },197);">
    backgroundColor:{



      
      "#fff"




    },197);">
    //1为省份键盘，其它为英文键盘




    keyBoardType: {



      Number,197);">
      value: 1,197);">
    }



  },197);">
  data: {



    keyVehicle1: '陕京津沪冀豫云辽',197);">
    keyVehicle2: '黑湘皖鲁新苏浙赣',197);">
    keyVehicle3: '鄂桂甘晋蒙吉闽贵',197);">
    keyVehicle4: '粤川青藏琼宁渝',197);">
    keyNumber: '1234567890',197);">
    keyEnInput1: 'QWERTYUIOP',197);">
    keyEnInput2: 'ASDFGHJKL',197);">
    keyEnInput3: 'ZXCVBNM',197);">
  },197);">
  methods: {



    vehicleTap: function (event) {



      let val = event.target.dataset.value;



      switch (val){



        case 'delete':



          this.triggerEvent('delete');



          'inputchange');



        break;



        'ok':



          'ok');



        
        default:



          'inputchange',val);



      }



    },197);">
  }



});

wxss文件


使用方式

示例
<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" bindinputchange="inputChange" key-board-type="{{keyBoardType}}" backgroundColor="white" />


属性
backgroundColorkeyBoardType

属性名称
类型
默认值
说明



isShow
布尔(boolean)
false
控制键盘是否显示,true显示，false不显示


buttonBorder
字符串(String)
"1px solid #ccc"
控制键盘按钮边框，同css border属性


#fff
控制键盘背景色,同css


数字(Number)
1
控制键盘显示类型,1为省份简写,2为英文简写




事件

完毕!以上代码仅供大家学习交流
相关推荐：
在微信小程序中使用“随机键盘”
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!



                        

                    
                  
                
            
            
            
            
            	相关内容

kendo-ui – 如何在粘贴到KendoUI编辑器时从文本中删除所有
使用DeviceOne实现微信小程序功能
微信小程序界面跳转传参
html – 单选按钮的标签也可以选择吗？
algorithm – 为Web服务器设计数据结构以存储访问页面的历史
jquery内置验证(validate)使用方法示例(表单验证)
domain-name-system – CloudFlare如何保护网站？
小程序云开发实战 --云数据库
jquery专业的导航菜单特效代码分享
微信公众号实现会员卡领取功能

            
        
    
    
    	
        推荐文章
            
        
    	
        站长推荐
            HTML Inline-Block DIV没有排队
CSS的等高元素
domain-name-system – 如何搜索域集成DNS条目
使用htmlPurifier 过滤输入能不能不要把&amp;转义
azure – Environment.GetEnvironmentVariable(“
javascript  – 在WooCommerce单个产品页面上专门
HTML cellpadding、cellspacing属性的简单示例
java  –  vs
a标签有小手状和无小手状css属性
微信中通过判断页面是否可见 来提示用户分享  用
        
        
        
    	
        热点阅读
            
        
        
        
	



【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。
建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果
Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同