微信小程序使用車牌號輸入法的示例代碼
更新時間：2019年08月20日 10:05:50 作者：ZJW0215
這篇文章主要介紹了微信小程序使用車牌號輸入法的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在做小程序時，做了一個關(guān)于車的項目，然后需要添加車輛信息、添加車牌號，使用車牌鍵盤輸入，當(dāng)時我把這個需求給砍了，然后在添加車輛信息時，老大看到數(shù)據(jù)庫里我亂填的車牌號，又讓我把他加上了^o^
1.效果圖
2.相關(guān)代碼使用組件形式實現(xiàn)鍵盤輸入
組件代碼index.wxml
<view class="carPlate" wx:if="{{show}}">
<block wx:if="{{type==1}}">
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword1}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword2}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword3}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{cityKeyword4}}" wx:key="{{item}}" bindtap="handleClick" data-type="1" data-item="{{item}}">{{item}}</view>
</view>
</block>
<block wx:else>
<view class="wordList">
<view class="wordItem" wx:for="{{keyNumber}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{wordList1}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{wordList2}}" wx:key="{{item}}" bindtap="handleClick" data-type="2" data-item="{{item}}">{{item}}</view>
<view class="wordItem wordClear" bindtap="handleClick" data-item="delete">
<image src="/images/input-clear.png" class="clearImg"></image>
</view>
</view>
<view class="wordList">
<view class="wordItem" wx:for="{{wordList3}}" wx:key="{{item}}" bindtap="handleClick" data-item="{{item}}">{{item}}</view>
<view class="wordItem wordConfirm" bindtap="handleClick" data-item="confirm">確定</view>
</view>
</block>
</view>
index.css
.carPlate{
position: fixed;
padding: 12rpx 12rpx 30rpx;
left: 0;
bottom: 0;
width: 100%;
/* height: 150px; */
font-size: 30rpx;
background: #fff;
box-sizing: border-box;
border-top: 1px solid rgb(211, 207, 207);
z-index: 200;
}
.wordList{
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.wordItem{
margin: 5rpx;
width: 70rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border: 1px solid #eee;
border-radius: 10rpx;
}
.wordConfirm{
width: 130rpx;
color: #fff;
background: #473af0;
}
.wordClear{
width: 100rpx;
}
.clearImg{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
index.js
Component({
properties: {
type: {
type: Number,
default: 1,
},
show: {
type: Boolean,
default: false,
}
},
data: {
cityKeyword1: '京滬浙蘇粵魯晉冀豫',
cityKeyword2: '川渝遼吉黑皖鄂湘贛',
cityKeyword3: '閩陜甘寧蒙津貴云',
cityKeyword4: '桂瓊青新藏港澳臺',
keyNumber: '1234567890',
wordList1: 'QWERTYUIOP',
wordList2: 'ASDFGHJKL',
wordList3: 'ZXCVBNM',
},
methods: {
handleClick(e) {
let value = e.currentTarget.dataset.item;
let type = e.currentTarget.dataset.type;
switch(value) {
case 'confirm':
this.triggerEvent('confirm');
break;
case 'delete':
this.triggerEvent('delete');
break;
default:
this.triggerEvent('change', { value, type });
}
}
}
})
3.父組件引入
我想實現(xiàn)點(diǎn)擊輸入后有上拉的效果，開始我想使用offset來實現(xiàn)的，但是下班后洗衣服想了下，不太好實現(xiàn)，我就想到了我以前做購物車時，有用到transform，原理差不多，我就把他用上了
然后就是點(diǎn)擊鍵盤外實現(xiàn)收起鍵盤，開始我想到的就是在父組件的最外層定義關(guān)閉事件，父級里面的盒子都使用catch方法阻止冒泡，但想下阻止冒泡好像又有點(diǎn)不合情理，就又把阻止冒泡給去掉了
父組件index.wxml
<view class="container" bindtap="handlePlateConfirm">
<view class="translateView" style="transform: translateY({{translateSpace}}px)">
<view class="list">
<view class="item">
<view class="label">*車牌號碼</view>
<view class="contentBox" catchtap="handleClick">
<view class="inputBox" wx:if="{{carNo}}">{{carNo}}</view>
<view class="promptText" wx:else>請輸入車牌號</view>
</view>
</view>
</view>
</view>
</view>
<car-plate show="{{showPlateInput}}" bindchange="handlePlateChange" type="{{inputType}}" bindconfirm="handlePlateConfirm" binddelete="handlePlateDelete" />
父組件index.js
Page({
data: {
carNo: '',
translateSpace: 0,
inputType: 1, // 車牌輸入類型，1簡稱，2數(shù)字或者字母,
showPlateInput: false,
},
/* 用于點(diǎn)擊彈出鍵盤輸入，space為鍵盤彈出后向上拉取的距離 */
handleClick(e) {
/* 150為鍵盤的高度 */
let space = -(e.currentTarget.offsetTop - 150);
/* regExp用于判斷當(dāng)前已輸入的車牌號是否是中文，并讓鍵盤顯示中文還是英文輸入 */
let regExp = /^[\u4e00-\u9fa5]+/;
let inputType = 1;
if(regExp.test(this.data.carNo)) {
inputType = 2;
}
this.setData({
translateSpace: space,
showPlateInput: true,
inputType
})
},
/* 鍵盤輸入操作 */
handlePlateChange(e) {
let value = e.detail.value;
let type = e.detail.type;
let carNo = this.data.carNo;
carNo += value;
if(type == 1) {
this.setData({
inputType: 2
})
}
this.setData({
carNo
})
},
/* 點(diǎn)擊鍵盤上的確定 */
handlePlateConfirm() {
/* isCarPlate用于判斷輸入的車牌號是否符合規(guī)范 */
if (!this.isCarPlate(this.data.carNo)) {
wx.showToast({
title: '請輸入正確的車牌號',
icon: 'none',
duration: 2000
})
return false;
}
this.setData({
translateSpace: 0,
showPlateInput: false,
inputType: 1
})
},
/* 用于鍵盤輸入刪除 */
handlePlateDelete(e) {
let carNo = this.data.carNo;
carNo = carNo.substring(0, carNo.length - 1);
if(carNo.length == 0) {
this.setData({
inputType: 1
})
}
this.setData({
carNo,
})
},
/* 判斷車牌號 */
isCarPlate(value) {
return /^(([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9掛學(xué)警港澳使領(lǐng)]))$/.test(value);
}
})
父組件index.css
.container{
height: 100vh;
background: #fff;
}
.translateView{
background: #eee;
}
.list{
margin-bottom: 20rpx;
background: #fff;
}
.list:last-child{
margin: 0;
}
.item{
display: flex;
padding: 0 26rpx;
width: 100%;
height: 116rpx;
box-sizing: border-box;
align-items: center;
border-bottom: 1px solid #eee;
}
.item:last-child{
border: none;
}
.label{
margin-right: 10rpx;
width: 140rpx;
}
.contentBox{
display: flex;
width: calc(100% - 150rpx);
height: 90rpx;
align-items: center;
justify-content: space-between;
}
.promptText{
color: #c7c7c7;
}
.inputBox{
width: 100%;
height: 80rpx;
line-height: 80rpx;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
這篇文章主要介紹了JavaScript DOM元素常見操作,包括針對dom元素的添加、刪除、修改等相關(guān)操作實現(xiàn)技巧與注意事項,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JS實現(xiàn)樣式清新的橫排下拉菜單效果,通過簡單的元素遍歷控制頁面元素的動態(tài)切換效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了源碼分析Django的message組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了第二篇Bootstrap起步的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
javascript設(shè)計模式在程序中經(jīng)常遇到，不同的設(shè)計模式都有各自的優(yōu)劣勢，本文給大家整理了七種設(shè)計模式，對js設(shè)計模式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要給大家介紹了關(guān)于利用JavaScript差集實現(xiàn)一個對比小工具的相關(guān)資料,雖然實現(xiàn)的界面不是太好看,但好在功能實用即可,需要的朋友可以參考下2021-07-07
js+html5實現(xiàn)canvas繪制橢圓形圖案的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制橢圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,感興趣的朋友可以參考一下2016-05-05
javascript函數(shù)以及基礎(chǔ)寫法100多條實用整理
100多個很有用的JavaScript函數(shù)以及基礎(chǔ)寫法匯總,在項目開發(fā)中經(jīng)常會使用到，本文整理了一些，希望對你們有幫助2013-01-01
JavaScript實現(xiàn)移動端頁面按手機(jī)屏幕分辨率自動縮放的最強(qiáng)代碼
這篇文章主要介紹了JavaScript實現(xiàn)移動端頁面按手機(jī)屏幕分辨率自動縮放的最強(qiáng)代碼，通過阻止瀏覽器的默認(rèn)行為各方面分析縮放的功能實現(xiàn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
js中將多個語句寫成一個語句的兩種方法講述了逗號運(yùn)算符將多個語句寫成一個語句以及花括號寫成一個語句的實現(xiàn)方法,需要的朋友可以參考一下2007-12-12