Parking Mini Program license plate keyboard how to develop

这篇文章主要介绍"停车小程序车牌键盘如何开发"，在日常操作中，相信很多人在停车小程序车牌键盘如何开发问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"停车小程序车牌键盘如何开发"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

wxml文件内容 {{item}} {{item}} {{item}} {{item}} {{item}} {{item}} {{item}} 删除 {{item}} 确定 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; }使用方式示例属性属性名称类型默认值说明isShow布尔(boolean)false控制键盘是否显示,true显示，false不显示buttonBorder字符串(String)"1px solid #ccc"控制键盘按钮边框，同css border属性backgroundColor字符串(String)#fff控制键盘背景色,同csskeyBoardType数字(Number)1控制键盘显示类型,1为省份简写,2为英文简写事件事件名称触发情况返回值delete删除按钮按下的时候触发微信事件ok确定按钮按下时触发微信事件inputchange输入按钮按下或者删除按钮按下时触发

输入的值

以上就是这篇关于停车小程序车牌键盘的实例，如果你也需要开发一款小程序，那么可以咨询 HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店

价值1980元火爆的0基础小程序制作开发赚钱训练营免费看

到此，关于"停车小程序车牌键盘如何开发"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧!若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章!