这篇文章主要介绍“停车小程序车牌键盘如何开发”,在日常操作中,相信很多人在停车小程序车牌键盘如何开发问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”停车小程序车牌键盘如何开发”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
<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>
{ "component": true }
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); } }, } });
: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 | 输入按钮按下或者删除按钮按下时触发 | 输入的值 |
以上就是这篇关于停车小程序车牌键盘的实例,如果你也需要开发一款小程序,那么可以咨询 HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
价值1980元火爆的0基础小程序制作开发赚钱训练营免费看
到此,关于“停车小程序车牌键盘如何开发”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。