小程序模板网

微信小程序车牌键盘

2018-07-25 小颗颗

项目背景

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

效果图如下

省份简写键盘如下:

省份简写键盘

英文简写键盘如下:

英文简写键盘

源代码

目录结构

目录结构

wxml文件内容


  1.  
    <view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}">
  2.  
    <!--省份简写键盘-->
  3.  
    <block wx:if="{{keyBoardType === 1}}">
  4.  
    <view class="vehicle-panel-row">
  5.  
    <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>
  6.  
    </view>
  7.  
    <view class="vehicle-panel-row">
  8.  
    <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>
  9.  
    </view>
  10.  
    <view class="vehicle-panel-row">
  11.  
    <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>
  12.  
    </view>
  13.  
    <view class="vehicle-panel-row-last">
  14.  
    <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>
  15.  
    </view>
  16.  
    </block>
  17.  
    <!--英文键盘 -->
  18.  
    <block wx:else>
  19.  
    <view class="vehicle-panel-row">
  20.  
    <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>
  21.  
    </view>
  22.  
    <view class="vehicle-panel-row">
  23.  
    <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>
  24.  
    </view>
  25.  
    <view class="vehicle-panel-row">
  26.  
    <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>
  27.  
    <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'>
  28.  
    <image src='./delete.svg' class='vehicle-en-button-delete' bindtap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image>
  29.  
    </view>
  30.  
    </view>
  31.  
    <view class="vehicle-panel-row-last">
  32.  
    <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>
  33.  
    <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>
  34.  
    </view>
  35.  
    </block>
  36.  
    </view>

json文件


  1.  
    {
  2.  
    "component": true
  3.  
    }

js文件


  1.  
    Component({
  2.  
     
  3.  
    externalClasses: ['v-panel'],
  4.  
     
  5.  
    properties: {
  6.  
    isShow: {
  7.  
    type: Boolean,
  8.  
    value: false,
  9.  
    },
  10.  
    buttonBorder: {
  11.  
    type: String,
  12.  
    value: "1px solid #ccc"
  13.  
    },
  14.  
    backgroundColor:{
  15.  
    type: String,
  16.  
    value: "#fff"
  17.  
    },
  18.  
    //1为省份键盘,其它为英文键盘
  19.  
    keyBoardType: {
  20.  
    type: Number,
  21.  
    value: 1,
  22.  
    }
  23.  
    },
  24.  
    data: {
  25.  
    keyVehicle1: '陕京津沪冀豫云辽',
  26.  
    keyVehicle2: '黑湘皖鲁新苏浙赣',
  27.  
    keyVehicle3: '鄂桂甘晋蒙吉闽贵',
  28.  
    keyVehicle4: '粤川青藏琼宁渝',
  29.  
    keyNumber: '1234567890',
  30.  
    keyEnInput1: 'QWERTYUIOP',
  31.  
    keyEnInput2: 'ASDFGHJKL',
  32.  
    keyEnInput3: 'ZXCVBNM',
  33.  
    },
  34.  
    methods: {
  35.  
    vehicleTap: function (event) {
  36.  
    let val = event.target.dataset.value;
  37.  
    switch (val){
  38.  
    case 'delete':
  39.  
    this.triggerEvent('delete');
  40.  
    this.triggerEvent('inputchange');
  41.  
    break;
  42.  
    case 'ok':
  43.  
    this.triggerEvent('ok');
  44.  
    break;
  45.  
    default:
  46.  
    this.triggerEvent('inputchange', val);
  47.  
    }
  48.  
    },
  49.  
    }
  50.  
    });

wxss文件


  1.  
    :host {
  2.  
    width: 100%;
  3.  
    }
  4.  
    .vehicle-panel {
  5.  
    width: 100%;
  6.  
    position: fixed;
  7.  
    bottom: 0;
  8.  
    display:flex;
  9.  
    flex-direction:column;
  10.  
    justify-content:center;
  11.  
    z-index: 1000;
  12.  
    }
  13.  
    .vehicle-panel-row {
  14.  
    display: flex;
  15.  
    justify-content: space-between;
  16.  
    align-items: center;
  17.  
    }
  18.  
    .vehicle-panel-row-last{
  19.  
    display: flex;
  20.  
    justify-content: space-between;
  21.  
    align-items: center;
  22.  
    }
  23.  
    .vehicle-panel-row-button {
  24.  
    background-color: #fff;
  25.  
    margin: 5rpx;
  26.  
    padding: 5rpx;
  27.  
    width: 80rpx;
  28.  
    height: 80rpx;
  29.  
    text-align: center;
  30.  
    line-height: 80rpx;
  31.  
    border-radius: 10rpx;
  32.  
    }
  33.  
    .vehicle-panel-row-button-number {
  34.  
    background-color: #eee;
  35.  
    }
  36.  
    .vehicle-panel-row-button-last {
  37.  
    width: 90rpx;
  38.  
    height: 90rpx;
  39.  
    line-height: 90rpx;
  40.  
    }
  41.  
    .vehicle-hover {
  42.  
    background-color: #ccc;
  43.  
    }
  44.  
    .vehicle-panel-row-button-img {
  45.  
    display: flex;
  46.  
    justify-content: center;
  47.  
    align-items: center;
  48.  
    }
  49.  
    .vehicle-en-button-delete {
  50.  
    width: 55rpx;
  51.  
    height: 85rpx;
  52.  
    }
  53.  
    .vehicle-panel-ok {
  54.  
    background-color: #0F4BA1;
  55.  
    color: #fff;
  56.  
    width: 150rpx;
  57.  
    height: 80rpx;
  58.  
    }

使用方式

示例

<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 输入按钮按下或者删除按钮按下时触发 输入的值

完毕!

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

 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24657.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询