置顶微信小程序车牌键盘实现精选热门

2021-07-28

3246浏览

4评论

微信小程序车牌键盘实现

前言

是真没想到小小的组件都有人剽窃。只能重发一遍了各大网站文章链接还有源码地址都在下方评论区。
微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了navigationStyle这个属性可以让用户去自定义的实现导航栏。下面直接奉上代码来说明实现沉浸式导航栏。

展示效果

文件说明

涉及到的文件有app.json
license-plate.js license-plate.wxml license-plate.wxss (这三个是封装的组件)
input-license.js input-license.wxml input-license.wxss (这三个是调用组件的页面，同时也涉及组件中的数据传输，方便调用的页面拿到输入的数据)
此外有input-license.wxss中引入的app.wxss这个是我根据自己习惯写的一些布局命名方式就不贴在文章里了

文件代码

JSON文件

app.json

可以在全局的json里引入组件也可以在某个页面去单独引入，我这里是把组件引在了全局里
app.json

  "usingComponents": {
    "license-plate":"/component/license-plate/license-plate"
  },

组件代码

license-plate.js

// component/license-plate/license-plate.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    firstRow:[],
    secondRow:[],
    thirdRow:[],
    fourthRow:[],
    currentFocus:0,
    tabIndex:'0'    //0-蓝牌，1-新能源
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 输入省份
    inpuProvince:function(e){
      var first=['1','2','3','4','5','6','7','8','9','0'];
      var second=['Q','W','E','R','T','Y','U','O','P'];
      var third=['A','S','D','F','G','H','J','K','L'];
      var fourth=['Z','X','C','V','B','N','M']
      console.log(e)
      this.triggerEvent('inputProvince',e.currentTarget.dataset.name)
      this.setData({
        currentFocus:1,
        firstRow:first,
        secondRow:second,
        thirdRow:third,
        fourthRow:fourth
      })
    },

    loadkeyboard:function(e,tab){
      console.log(e)
      if(e==0){
        console.log('aaa')
        this.setData({
          currentFocus:0,
          firstRow:['苏','京','津','沪','翼','渝','黑','吉','辽'],
          secondRow:['晋','青','豫','皖','浙','闽','赣','湘','鄂'],
          thirdRow:['粤','琼','甘','陕','贵','云','川','蒙'],
          fourthRow:['新','藏','宁','桂','港','澳']
        })
      }
      else{
        console.log('bbb')
        this.setData({
          currentFocus:e,
          firstRow:['1','2','3','4','5','6','7','8','9','0'],
          secondRow:['Q','W','E','R','T','Y','U','O','P'],
          thirdRow:['A','S','D','F','G','H','J','K','L'],
          fourthRow:['Z','X','C','V','B','N','M']
        })
      }
      this.data.tabIndex=tab
    },

    // 输入市
    inputCity:function(e){
      var first=['1','2','3','4','5','6','7','8','9','0'];
      var second=['Q','W','E','R','T','Y','U','O','P'];
      var third=['A','S','D','F','G','H','J','K','L'];
      var fourth=['Z','X','C','V','B','N','M']
      console.log(e)
      this.triggerEvent('inputCity',e.currentTarget.dataset.name)
      this.setData({
        currentFocus:2,
        firstRow:first,
        secondRow:second,
        thirdRow:third,
        fourthRow:fourth
      })
    },

    // 输入车牌
    inputLicense:function(e){
      if(e.currentTarget.dataset.name!='O'){
        //蓝牌
        if(this.data.tabIndex=='0'&&this.data.currentFocus!=7){
          this.triggerEvent('inputLicense',e.currentTarget.dataset.name)
          this.setData({
            currentFocus:this.data.currentFocus+1
          })
        }
        else if(this.data.tabIndex=='1'&&this.data.currentFocus!=8){  //新能源
          this.triggerEvent('inputLicense',e.currentTarget.dataset.name)
          this.setData({
            currentFocus:this.data.currentFocus+1
          })
        }
        else{
          return;
        }
      }

    },

    backSpace:function(){
      if(this.data.currentFocus>2){
        this.setData({
          currentFocus:this.data.currentFocus-1
        })
        this.triggerEvent('backspace',this.data.currentFocus)
      }
      else if(this.data.currentFocus==2){
        this.setData({
          currentFocus:this.data.currentFocus-1
        })
        this.triggerEvent('backspace',this.data.currentFocus)
      }
      else if(this.data.currentFocus==1){
        this.setData({
          currentFocus:this.data.currentFocus-1,
          firstRow:['苏','京','津','沪','翼','渝','黑','吉','辽'],
          secondRow:['晋','青','豫','皖','浙','闽','赣','湘','鄂'],
          thirdRow:['粤','琼','甘','陕','贵','云','川','蒙'],
          fourthRow:['新','藏','宁','桂','港','澳']
        })
        this.triggerEvent('backspace',this.data.currentFocus)
      }
      else{
        return;
      }
    },

    closeKeyBoard:function(){
      this.triggerEvent('closeKeyBoard')
    }

  }
})

license-plate.wxml

<!--component/license-plate/license-plate.wxml-->
<view class="keyBoard flxc">
	<view class="top-part flxr aic jcb">
		<view class="font30 fontgrey" bindtap="closeKeyBoard">取消</view>
		<view class="font30 fontblue" bindtap="closeKeyBoard">确定</view>
	</view>
	<!-- 省份键盘 -->
	<view class="middle-part flxc aic" wx:if="{{currentFocus==0}}">
		<view class="flxr">
			<view wx:for="{{firstRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{secondRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{thirdRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{fourthRow}}" class="key-class" data-name="{{item}}" bindtap="inpuProvince">{{item}}</view>
			<view class="key-class flxc aic jcc" catchtap="backSpace">
				<image src="/image/delete.png" class="backspace"></image>
			</view>
		</view>
	</view>
	<!-- 市区键盘 -->
	<view class="middle-part flxc aic" wx:if="{{currentFocus==1}}">
		<view class="flxr">
			<view wx:for="{{firstRow}}" class="key-class2" data-name="{{item}}">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{secondRow}}" class="key-class" data-name="{{item}}" catchtap="inputCity">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{thirdRow}}" class="key-class" data-name="{{item}}" catchtap="inputCity">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{fourthRow}}" class="key-class" data-name="{{item}}" catchtap="inputCity">{{item}}</view>
			<view class="key-class flxc aic jcc" catchtap="backSpace">
				<image src="/image/delete.png" class="backspace"></image>
			</view>
		</view>
	</view>
	<!-- 车牌键盘 -->
	<view class="middle-part flxc aic" wx:if="{{currentFocus!=1&&currentFocus!=0}}">
		<view class="flxr">
			<view wx:for="{{firstRow}}" catchtap="inputLicense" class="key-class" data-name="{{item}}">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{secondRow}}" class="{{item=='O'?'key-class2':'key-class'}}" data-name="{{item}}" catchtap="inputLicense">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{thirdRow}}" class="key-class" data-name="{{item}}" catchtap="inputLicense">{{item}}</view>
		</view>
		<view class="flxr mt10">
			<view wx:for="{{fourthRow}}" class="key-class" data-name="{{item}}" catchtap="inputLicense">{{item}}</view>
			<view class="key-class flxc aic jcc" catchtap="backSpace">
				<image src="/image/delete.png" class="backspace"></image>
			</view>
		</view>
	</view>
</view>

license-plate.wxss

/* component/license-plate/license-plate.wxss */
@import '/app.wxss';
.friendlyAlert{
  height: 100%;
  width: 100%;
  position: absolute;
}

.keyBoard{
  height: 616rpx;
  width: 100%;
  background: #E1E3E7;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  position: fixed;
  bottom: 0;
  z-index: 100
}


.top-part{
  height: 82rpx;
  width: 100%;
  padding: 0 24rpx;
}

.font30{
  font-size: 30rpx;
}

.font36{
  font-size: 36rpx;
}

.fontblue{
  color: #3485F4;
}

.fontgrey{
  color: #91959C;
}

.middle-part{
  height: 454rpx;
  width: 100%;
  padding: 26rpx 10rpx;
}

.key-class{
  height: 90rpx;
  width: 66rpx;
  border-radius: 8rpx;
  font-size: 36rpx; 
  color: #333;
  line-height: 90rpx;
  text-align: center;
  box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.16);
  background: #fff;
  margin-right: 8rpx;
}

.key-class2{
  height: 90rpx;
  width: 66rpx;
  border-radius: 8rpx;
  font-size: 36rpx; 
  color: #CACACA;
  line-height: 90rpx;
  text-align: center;
  box-shadow: 0 1rpx 1rpx rgba(0, 0, 0, 0.16);
  background: #fff;
  margin-right: 8rpx;
}

.backspace{
  height: 32rpx;
  width: 44rpx;
}

页面代码

input-license.js

// pages/component/input-license/input-license.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabIndex: '0',
    code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }],
    currentFocus: 0,
    isFocus: false,
    showKeyBoard: false,
    license_color: '0',
    license_plate: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

    // 输入省份
    inputProvince: function (e) {
      var temp = this.data.code;
      temp[0].value = e.detail;
      this.setData({
        code: temp,
        currentFocus: 1
      })
    },
    // 输入城市
    inputCity: function (e) {
      var temp = this.data.code;
      temp[1].value = e.detail;
      this.setData({
        code: temp,
        currentFocus: 2
      })
    },

    //输入车牌
    inputLicense: function (e) {
      var temp = this.data.code;
      var i = this.data.currentFocus
      temp[i].value = e.detail;
      this.setData({
        code: temp,
        currentFocus: i + 1
      })
    },
  
  
    // 退格 
    backspace: function (e) {
      var i = e.detail
      console.log(i)
      var temp = this.data.code;
      temp[i].value = '';
      this.setData({
        code: temp,
        currentFocus: i
      })
    },
  
    closeKeyBoard: function () {
      this.setData({
        showKeyBoard: false,
        isFocus: false
      })
    },
  
    openKeyBoard: function () {
      this.setData({
        showKeyBoard: true,
        isFocus: true
      })
      this.keyboard = this.selectComponent("#keyboard");
      this.keyboard.loadkeyboard(this.data.currentFocus, this.data.tabIndex)
    },
  
    // 切换车牌
    changeTab: function (e) {
      console.log(e)
      this.setData({
        tabIndex: e.currentTarget.dataset.index,
        currentFocus: 0
      })
      if (e.currentTarget.dataset.index == '1') {
        this.setData({
          code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }]
        })
        this.data.license_color = '4'
      }
      else {
        this.setData({
          code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }]
        })
        this.data.license_color = '0'
      }
    },
})

input-license.wxml

<!--pages/component/input-license/input-license.wxml-->
<nav-bar title="车牌键盘" whetherShow="1"></nav-bar>
<view class="top-part" style="margin-top:235rpx">
	<view class="title">选择车牌类型</view>
	<view class="chooseType flxr aic mt20">
		<image wx:if="{{tabIndex=='1'}}" class="type-item" src="/image/lanpai2.png" bindtap="changeTab" data-index="0"></image>
		<image wx:if="{{tabIndex=='0'}}" class="type-item" src="/image/lanpai.png"></image>
		<image wx:if="{{tabIndex=='0'}}" class="type-item ml40" src="/image/lvpai2.png" bindtap="changeTab" data-index="1"></image>
		<image wx:if="{{tabIndex=='1'}}" class="type-item ml40" src="/image/lvpai.png"></image>
	</view>
	<view class="title mt20">请输入需要办理车辆的车牌号</view>
	<view class="flxr license mt20" bindtap="openKeyBoard">
		<view wx:for="{{code}}" class="edit-text {{index==0?'':'ml10'}} {{tabIndex=='1'?'colorG':''}}" wx:for-index="index">
			<view>{{item.value}}</view>
			<view wx:if="{{currentFocus==index&&isFocus}}" class="cursor"></view>
		</view>
	</view>
</view>
<view wx:if="{{showKeyBoard}}" class="friendlyAlert" catchtap="closeKeyBoard"></view>
<license-plate id="keyboard" wx:if="{{showKeyBoard}}" bindcloseKeyBoard="closeKeyBoard" bindinputProvince="inputProvince" bindinputCity="inputCity" bindinputLicense="inputLicense" bindbackspace="backspace"></license-plate>

input-license.wxss

.top-part{
  width: 100%;
  height: 460rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
}

.middle-part{
  width: 100%;
  height: 300rpx;
  background: #fff;
  border-radius: 12rpx;
  padding:0 32rpx;
}

.middle-part .middle-item{
  height: 33%;
  width: 100%;
  padding: 29rpx 0;
}

.chooseType{
  height: 80rpx;
  width: 100%;
}

.type-item{
  height:80rpx;
  width: 200rpx;
}

.license{
  height: 94rpx;
  width: 100%;
}

.edit-text{
  height: 94rpx;
  width: 66rpx;
  position: relative;
  border: 1rpx solid #4E92EF;
  border-radius: 6rpx;
  line-height: 94rpx;
  text-align: center;
  font-size: 36rpx;
}

.cursor {
  width: 36rpx;
  height: 4rpx;
  background-color: #333333;
  animation: focus 1.2s infinite;
  position: absolute;
  left: 50%;
  margin-left: -18rpx;
  bottom: 14rpx;
}

.friendlyAlert{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}

.colorG{
  border: 1rpx solid #5BCA92;
}

.tips{
  color: #91959C;
  font-size: 22rpx;

}

总结

下载代码链接——车牌组件
有不足之处还希望各位老哥们指出。感谢感谢
如果大家有什么比较实用的组件想法需要帮忙实现可以找我
PS：感谢释予老哥的切图

分享评论

4 个评论

允乐
2023-04-26
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
大家不要忘了app.wxss里面也有代码哈。布局方面的样式全都被放进里面了
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2023-04-26
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
梁小狼🐺
2021-11-02
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
是少发部分代码么？
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2021-11-02
赞同
回复 2
- 理想
  2021-11-22
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  基于楼主代码，改为了横排布局，不过还有待完善，我基础比较菜，欢迎其它朋友帮忙完善一下：https://gitee.com/zhaoquan/wx-mp-license-plate-keyboard
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2021-11-22
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
- 允乐
  2023-04-26
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  是在全局样式app.wxss里面哈
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2023-04-26
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
好事花生
2021-08-10
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
Cannot read property 'loadkeyboard' of null
点击键盘输入的时候报这个错，什么意思
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2021-08-10
赞同
回复 1
- 允乐
  2021-08-17
  加粗
  标红
  插入代码
  插入链接
  插入图片
  上传视频
  请登录后发表内容
  关闭
  新增或编辑超链接
  链接地址
  确认取消
  关闭
  插入视频
  视频链接
  确认取消
  发表
  看下有没有这行呢 this.keyboard = this.selectComponent("#keyboard")。wxml里面有没有keyboard这个id的元素
  你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
  待楼主反馈
  2021-08-17
  赞
  回复
  关闭
  请选择投诉理由
  广告内容
  违法违规
  恶意灌水内容
  其他
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他
允乐
2021-07-28
加粗
标红
插入代码
插入链接
插入图片
上传视频
请登录后发表内容
关闭
新增或编辑超链接
链接地址
确认取消
关闭
插入视频
视频链接
确认取消
发表
掘金地址：https://juejin.cn/post/6899629605116739597
CSDN地址: https://blog.csdn.net/yunle51939/article/details/110222694
源码下载地址:https://download.csdn.net/download/yunle51939/13189076?spm=1001.2014.3001.5503
包含切图资源等如有问题可以评论

你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
待楼主反馈
2021-07-28
赞同
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

请登录后发表内容

作者介绍

文章标签

#微信小程序应用开发赛

置顶微信小程序车牌键盘实现精选热门

前言

展示效果

文件说明

文件代码

JSON文件

app.json

组件代码

license-plate.js

license-plate.wxml

license-plate.wxss

页面代码

input-license.js

input-license.wxml

input-license.wxss

总结

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

请选择投诉理由

新增或编辑超链接

插入视频

新增或编辑超链接

插入视频

请选择投诉理由

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号