在做小程序時(shí)，做了一個(gè)關(guān)于車的項(xiàng)目，然后需要添加車輛信息、添加車牌號(hào)，使用車牌鍵盤輸入，當(dāng)時(shí)我把這個(gè)需求給砍了，然后在添加車輛信息時(shí)，老大看到數(shù)據(jù)庫里我亂填的車牌號(hào)，又讓我把他加上了^o^
1.效果圖
2.相關(guān)代碼使用組件形式實(shí)現(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: '桂瓊青新藏港澳臺(tái)', 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.父組件引入
我想實(shí)現(xiàn)點(diǎn)擊輸入后有上拉的效果，開始我想使用offset來實(shí)現(xiàn)的，但是下班后洗衣服想了下，不太好實(shí)現(xiàn)，我就想到了我以前做購物車時(shí)，有用到transform，原理差不多，我就把他用上了
然后就是點(diǎn)擊鍵盤外實(shí)現(xiàn)收起鍵盤，開始我想到的就是在父組件的最外層定義關(guān)閉事件，父級(jí)里面的盒子都使用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">*車牌號(hào)碼</view> <view class="contentBox" catchtap="handleClick"> <view class="inputBox" wx:if="{{carNo}}">{{carNo}}</view> <view class="promptText" wx:else>請(qǐng)輸入車牌號(hào)</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)前已輸入的車牌號(hào)是否是中文，并讓鍵盤顯示中文還是英文輸入 */ 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用于判斷輸入的車牌號(hào)是否符合規(guī)范 */ if (!this.isCarPlate(this.data.carNo)) { wx.showToast({ title: '請(qǐng)輸入正確的車牌號(hào)', 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, }) }, /* 判斷車牌號(hào) */ 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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
