欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
使用车牌号输入法的微信小程序
来源:南京网站制作 时间:2019-11-29 09:11:28

在制作一个小程序的过程中,南京小程序开发安优网络近期做了一个有关汽车的项目,然后需要添加车辆信息,车牌号,并使用车牌键盘进行输入。当时,我切断了这个需求,然后在添加车辆信息时,老板看到了我在数据库中填写的车牌号,并要求我在其中添加^ 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南京网站制作来阐述
下一篇: 在南京网站建设的认为中什么是响应式网页设计?
最新案例
迈特菲
迈特菲
开为科技
开为科技
南京清真桃源村食品厂有限公司
南京清真桃源村食品厂有限公司
泰杰赛
泰杰赛
苏派教育
苏派教育
你可能感兴趣
如何使网站符合美国ADA
5个标志着您的网站需要升级
南京网站制作分享只能有一个:单页网站的力量
南京网站建设说说为什么响应式和移动优先设计对医疗行业至关重要
南京网站制作分享10个免费网站设计工具
南京网站建设教你使用主页SEO技巧可帮助您增加自然网站流量
网站制作的动画–激发网站生命的6种有效方法
为什么南京网站建设我们使用WordPress
最后更新
5G对网站建设和开发的影响 响应式网页设计,这是答案吗?或只是响应? 商业网站南京网站制作认为最常见的7个问题 南京网站建设是如何优化网站速度而提高网站性能 微信小程序的快速发展:从帐户注册到现成的小程序 对于WEB标准,南京网站制作我们做得足够吗? 在南京网站建设的认为中什么是响应式网页设计? 使用车牌号输入法的微信小程序
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例