微信小程序车牌键盘组件实现介绍分析

前言

微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了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;

}
项目源码下载：http://code.662p.com/view/19318.html