微信小程序車牌鍵盤
發布時間：2018-07-25 08:55 所屬欄目：小程序開發教程
項目背景
公司要做一個停車場微信小程序，支持臨時車預支付以及支付記錄查詢等功能,其中涉及車牌輸入的功能，為了提升用戶體驗，避免繁瑣的輸入，決定自己寫一個鍵盤。
效果圖如下
省份簡寫鍵盤如下:
省份簡寫鍵盤
英文簡寫鍵盤如下:
英文簡寫鍵盤
源代碼
目錄結構
目錄結構
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 | 輸入按鈕按下或者刪除按鈕按下時觸發 | 輸入的值 |
完畢!
以上代碼僅供大家學習交流
