Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Parking Mini Program license plate keyboard how to develop

2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

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

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基础小程序制作开发赚钱训练营免费看

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report