导航：首页 > 开发技术 >

停车小程序车牌键盘如何开发

发表于：2024-10-02 作者：千家信息网编辑

千家信息网最后更新 2024年10月02日，这篇文章主要介绍"停车小程序车牌键盘如何开发"，在日常操作中，相信很多人在停车小程序车牌键盘如何开发问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"停车小程序车牌键盘如何

千家信息网最后更新 2024年10月02日停车小程序车牌键盘如何开发

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

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	控制键盘背景色,同css
keyBoardType	数字(Number)	1	控制键盘显示类型,1为省份简写,2为英文简写

事件

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

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

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

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

很赞哦！