在制作一个小程序的过程中，南京小程序开发安优网络近期做了一个有关汽车的项目，然后需要添加车辆信息，车牌号，并使用车牌键盘进行输入。当时，我切断了这个需求，然后在添加车辆信息时，老板看到了我在数据库中填写的车牌号，并要求我在其中添加^ o ^
1.效果图
使用车牌号输入法的微信小程序使用车牌号输入法的微信小程序
2.相关代码
使用组件形式实现键盘输入
组件代码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 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" > 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: 'Beijing, Shanghai, Zhejiang, Jiangsu, Guangdong, Shandong, Shanxi, Hebei and Henan',
Citykeyword2: 'Sichuan, Chongqing, Liaoning, Jilin, Anhui, Hubei, Hunan and Jiangxi',
Citykeyword3: 'Fujian, Shaanxi, Gansu, Ningxia, Mongolia, Tianjin and Guiyun',
Citykeyword4: 'guiqiongqing new Tibet, Hong Kong, Macao and Taiwan',
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.父组件导入
我想在单击输入后实现上拉效果。起初，我想使用偏移来实现它，但是下班后我考虑要洗衣服，这不是很容易实现。我以为当我用来做购物车时，我使用了transform，它具有相同的原理，所以我使用了它
然后，我单击键盘的外部以关闭键盘。首先，我想到了在父组件的最外层定义close事件。父级中的框使用catch方法来防止气泡。但是考虑防止气泡似乎是不合理的，因此我删除了阻塞气泡
父组件index.wxml
<view class="container" bindtap="handlePlateConfirm">
<view class="translateView" style="transform: translateY({{translateSpace}}px)">
<view class="list">
<view class="item">
< view class = "label" > * license plate number < / View >
<view class="contentBox" catchtap="handleClick">
<view class="inputBox" wx:if="{{carNo}}">{{carNo}}</view>
< view class = "prompt text" Wx: else > please enter the license plate number < / 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, // license plate input type, 1 abbreviation, 2 numbers or letters,
showPlateInput: false,
},
/*It is used to click the pop-up keyboard input, and space is the pull-up distance after the keyboard pops up*/
handleClick(e) {
/*150 is the height of the keyboard*/
let space = -(e.currentTarget.offsetTop - 150);
/*Regexp is used to judge whether the currently entered license plate number is Chinese, and let the keyboard display Chinese or English input*/
let regExp = /^[\u4e00-\u9fa5]+/;
let inputType = 1;
if(regExp.test(this.data.carNo)) {
inputType = 2;
}
this.setData({
translateSpace: space,
showPlateInput: true,
inputType
})
},
/*Keyboard input operation*/
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
})
},
/*Click OK on the keyboard*/
handlePlateConfirm() {
/*Iscarplate is used to judge whether the input license plate number conforms to the specification*/
if (!this.isCarPlate(this.data.carNo)) {
wx.showToast({
Title: 'please enter the correct license plate number',
icon: 'none',
duration: 2000
})
return false;
}
this.setData({
translateSpace: 0,
showPlateInput: false,
inputType: 1
})
},
/*For keyboard input deletion*/
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,
})
},
/*Judge license plate number*/
isCarPlate(value) {
Return / ^ ([A-Z] ([0-9] {[5} [DF] ([0-9] {[5} [DF]]] [0-9] {[5} [DF]] [0-9] {[0-9] {[0-9] {[0-9] {[4}))) ([a-hj- np-np-z0-9] [0-9] {[0-9] {[4}))) ([A-Z] [A-Z] [A-Z] [A-Z] [Z] [A-Z] [Z] [A-Z] [Z] [A-9] {[0-9] {[0-9] {[4}))]] [0-9] {[0-9] {[4}))))) ([A-Z] [a-hj-np-z0-9] {4} [a-hj-np-z0-9 academic police officer in Hong Kong and Macao]) $/. 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;
}
用功读书。如果对您的学习有帮助，请留下您的印记
南京小程序开发先前的建议：
单行和多行文本超过后添加省略号
判断IOS，Android和PC
使用Vue开发移动管理背景
画三角形
本文地址：
http://www.njanyou.cn/web/2859.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
网页设计的三个E南京网站制作来阐述
下一篇：
在南京网站建设的认为中什么是响应式网页设计？
