最新公告
  • 欢迎您光临网站无忧模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > 微信小程序——车牌键盘组件实现

    微信小程序——车牌键盘组件实现

    正文概述 掘金(允乐51939)   2020-11-27   584

    前言

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


    下载网 » 微信小程序——车牌键盘组件实现

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(允乐51939)

    掘金(允乐51939) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元