停車小程序車牌鍵盤開發(fā)實(shí)例

2018-07-25|HiShop

導(dǎo)讀：做一個(gè)停車場微信小程序，支持臨時(shí)車預(yù)支付以及支付記錄查詢等功能,其中涉及車牌輸入的功能，為了提升用戶體驗(yàn)，避免繁瑣的輸入，需要寫一個(gè)鍵盤。...

做一個(gè)停車場微信小程序，支持臨時(shí)車預(yù)支付以及支付記錄查詢等功能,其中涉及車牌輸入的功能，為了提升用戶體驗(yàn)，避免繁瑣的輸入，需要寫一個(gè)鍵盤。

效果圖如下

省份簡寫鍵盤如下:

省份簡寫鍵盤

英文簡寫鍵盤如下:

英文簡寫鍵盤

源代碼

目錄結(jié)構(gòu)

wxml文件內(nèi)容

<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" />

屬性

屬性名稱	類型	默認(rèn)值	說明
isShow	布爾(boolean)	false	控制鍵盤是否顯示,true顯示，false不顯示
buttonBorder	字符串(String)	"1px solid #ccc"	控制鍵盤按鈕邊框，同css border屬性
backgroundColor	字符串(String)	#fff	控制鍵盤背景色,同css
keyBoardType	數(shù)字(Number)	1	控制鍵盤顯示類型,1為省份簡寫,2為英文簡寫

事件

事件名稱	觸發(fā)情況	返回值
delete	刪除按鈕按下的時(shí)候觸發(fā)	微信事件
ok	確定按鈕按下時(shí)觸發(fā)	微信事件
inputchange	輸入按鈕按下或者刪除按鈕按下時(shí)觸發(fā)	輸入的值

以上就是這篇關(guān)于停車小程序車牌鍵盤的實(shí)例，如果你也需要開發(fā)一款小程序，那么可以咨詢 HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店

您可能感興趣:小程序開發(fā)小程序組件

上一篇：如何利用小程序快速獲客吸粉 下一篇：點(diǎn)餐小程序購物車效果實(shí)現(xiàn),點(diǎn)餐小程序購物車列表的實(shí)現(xiàn)