微信小程序车牌键盘

微信小程序车牌键盘

微信小程序车牌键盘

项目背景

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

效果图如下

省份简写键盘如下:

省份简写键盘

英文简写键盘如下:

英文简写键盘

源代码

目录结构

目录结构

wxml文件内容

<view wx:if="{
   {isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{
   {backgroundColor}}">
  <!--省份简写键盘-->
  <block wx:if="{
   {keyBoardType === 1}}">
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='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 class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
   {buttonBorder}}" wx:for="{
   {keyVehicle2}}" bindtap='vehicleTap' data-value="{
   {item}}" wx:for-index="idx" wx:key="idx">{
   {item}}</view>
    </view>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
   {buttonBorder}}" wx:for="{
   {keyVehicle3}}" bindtap='vehicleTap' data-value="{
   {item}}" wx:for-index="idx" wx:key="idx">{
   {item}}</view>
    </view>
    <view class="vehicle-panel-row-last">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' data-value="{
   {item}}" wx:for="{
   {keyVehicle4}}" style="border:{
   {buttonBorder}}" wx:for-index="idx" wx:key="idx">{
   {item}}</view>
    </view>
  </block>
  <!--英文键盘  -->
  <block wx:else>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-number' bindtap='vehicleTap' data-value="{
   {item}}" wx:for="{
   {keyNumber}}" style="border:{
   {buttonBorder}}" wx:for-index="idx" wx:key="item">{
   {item}}</view>
    </view>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
   {buttonBorder}}" wx:for="{
   {keyEnInput1}}" bindtap='vehicleTap' data-value="{
   {item}}" wx:for-index="idx"  wx:key="idx">{
   {item}}</view>
    </view>
    <view class="vehicle-panel-row">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button' style="border:{
   {buttonBorder}}" wx:for="{
   {keyEnInput2}}" bindtap='vehicleTap' data-value="{
   {item}}" wx:for-index="idx" wx:key="idx">{
   {item}}</view>
      <view hover-class="vehicle-hover" style="border:{
   {buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img'>
        <image src='./delete.svg' class='vehicle-en-button-delete' bindtap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image>
      </view>
    </view>
    <view class="vehicle-panel-row-last">
      <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' style="border:{
   {buttonBorder}}" data-value="{
   {item}}" wx:for="{
   {keyEnInput3}}" wx:for-index="idx" wx:key="idx">{
   {item}}</view>
      <view hover-class="vehicle-hover" style="border:{
   {buttonBorder}}" hover-start-time="10" hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-ok' bindtap='vehicleTap' data-value="ok">确定</view>
    </view>
  </block>
</view>

json文件

{
  "component": true
}

js文件

Component({

  externalClasses: ['v-panel'],

  properties: {
    isShow: {
      type: Boolean,
      value: false,
    },
    buttonBorder: {
      type: String,
      value: "1px solid #ccc"
    },
    backgroundColor:{
      type: String,
      value: "#fff"
    },
    //1为省份键盘,其它为英文键盘
    keyBoardType: {
      type: Number,
      value: 1,
    }
  },
  data: {
    keyVehicle1: '陕京津沪冀豫云辽',
    keyVehicle2: '黑湘皖鲁新苏浙赣',
    keyVehicle3: '鄂桂甘晋蒙吉闽贵',
    keyVehicle4: '粤川青藏琼宁渝',
    keyNumber: '1234567890',
    keyEnInput1: 'QWERTYUIOP',
    keyEnInput2: 'ASDFGHJKL',
    keyEnInput3: 'ZXCVBNM',
  },
  methods: {
    vehicleTap: function (event) {
      let val = event.target.dataset.value;
      switch (val){
        case 'delete':
          this.triggerEvent('delete');
          this.triggerEvent('inputchange');
        break;
        case 'ok':
          this.triggerEvent('ok');
        break;
        default:
          this.triggerEvent('inputchange', val);
      }
    },
  }
});

wxss文件

:host {
  width: 100%;
}
.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index: 1000;
}
.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-last{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-button {
  background-color: #fff;
  margin: 5rpx;
  padding: 5rpx;
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
}
.vehicle-panel-row-button-number {
  background-color: #eee;
}
.vehicle-panel-row-button-last {
  width: 90rpx;
  height: 90rpx;
  line-height: 90rpx;
}
.vehicle-hover {
  background-color: #ccc;
}
.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-en-button-delete {
  width: 55rpx;
  height: 85rpx;
}
.vehicle-panel-ok {
  background-color: #0F4BA1;
  color: #fff;
  width: 150rpx;
  height: 80rpx;
}

使用方式

示例

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

属性

属性名称 类型 默认值 说明
isShow 布尔(boolean) false 控制键盘是否显示,true显示,false不显示
buttonBorder 字符串(String) “1px solid #ccc” 控制键盘按钮边框,同css border属性
backgroundColor 字符串(String) #fff 控制键盘背景色,同css
keyBoardType 数字(Number) 1 控制键盘显示类型,1为省份简写,2为英文简写

事件

事件名称 触发情况 返回值
delete 删除按钮按下的时候触发 微信事件
ok 确定按钮按下时触发 微信事件
inputchange 输入按钮按下或者删除按钮按下时触发 输入的值

完毕!

以上代码仅供大家学习交流

转载于:https://www.cnblogs.com/rjhlovelife/p/9347189.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101531.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • redis如何设置密码及验证密码_redis如何设置密码及验证密码

    redis如何设置密码及验证密码_redis如何设置密码及验证密码在百度云安装redis服务之后,一直给我发送系统安全警告,推荐我redis设置访问密码,于是出于安全考虑我就设置一下redis的密码1.修改redis.conf配置文件:找到requirepass这一行,解注这一行代码,requirepass后面就是跟的自己的密码。2.关闭redis服务,发现报错:可以使用下面两个方法关闭服务:方式一:通过psaux|grepred…

  • struts2标签详解[通俗易懂]

    struts2标签详解[通俗易懂]struts2标签讲解要使用Struts2的标签,只需要在JSP页面添加如下一行定义即可:<%@taglibprefix="s"uri="/struts-t

  • BoundsChecker 使用方法[通俗易懂]

    1前言我在本文中详细介绍了测试工具NuMegaDevpartner(以下简称NuMega)的使用方法。NuMega是一个动态测试工具,主要应用于白盒测试。该工具的特点是学习简单、使用方便、功能有效。NuMega共有三个独立的子功能——BoundsChecker、TrueCoverage、TrueTime。BoundsChecker为代码检错工具,TrueCoverage为测试覆盖率统计…

  • 单片机流水灯程序[通俗易懂]

    单片机流水灯程序[通俗易懂]一、流水灯实验1、设计要求P1口接8个发光二极管,烧录程序后发光二极管依次点亮2、硬件要求利用proteusIsis仿真,选择器件,AT89C51、LED-BLUE、RES3、软件设计源程序:/*********************必要变量定义******************/#include&lt;reg51.h&gt;#include&lt;intrns.h&gt;…

  • Java 实现异步调用

    Java 实现异步调用首先我遇到的问题是接口调用时需要更新缓存而更新缓存又是个说快不快的过程所以打算做异步调用返回我所需要的结果即可,至于缓存什么时候更新完就不是我所需要关注的了废话不多说上代码publicclassMyExecutor{  privateExecutorServiceexecutor=Executors.newCachedThreadPool();  publi…

  • Win10禁止更新小插件Privatezilla Version 0.50.5[通俗易懂]

    Win10禁止更新小插件Privatezilla Version 0.50.5[通俗易懂]Win10禁止更新小插件PrivatezillaVersion0.50.5禁用功能:Win10隐私、微软小娜、Bloatware、软件权限、Win更新等下载地址:https://l13144.lanzoui.com/iMdzkt5dr0j

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号