微信小程序——車(chē)牌鍵盤組件實現 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn)，軟件還是小程序，都要直接或間接能為您産生價值，我們在追求其視覺表現的同時，更側重于功能的便捷，營銷的便利，運營的高效，讓網站(zhàn)成為營銷工具，讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持！

微信小程序——車(chē)牌鍵盤組件實現

發表時間：2021-1-5

發布人：葵宇科技

浏覽次數：34

微信小程序中(zhōng)導航欄一般來說是默認的展示标題等等，可(kě)以做的樣式改變僅僅能通(tōng)過配置一些官方提供的屬性來實現。除此之外小程序還提供了navigationStyle這個(gè)屬性可(kě)以讓用戶去自定義的實現導航欄。下(xià)面直接奉上代碼來說明實現沉浸式導航欄。

展示效果

文(wén)件說明

涉及到的文(wén)件有app.json license-plate.js license-plate.wxml license-plate.wxss (這三個(gè)是封裝的組件) input-license.js input-license.wxml input-license.wxss (這三個(gè)是調用組件的頁面，同時也涉及組件中(zhōng)的數據傳輸，方便調用的頁面拿到輸入的數據) 此外有input-license.wxss中(zhōng)引入的app.wxss這個(gè)是我根據自己習慣寫的一些布局命名方式就不貼在文(wén)章裡了


文(wén)件代碼

JSON文(wén)件

app.json

可(kě)以在全局的json裡引入組件也可(kě)以在某個(gè)頁面去單獨引入，我這裡是把組件引在了全局裡 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
      })
    },

    // 輸入車(chē)牌
    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>
	<!-- 車(chē)牌鍵盤 -->
	<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 = http://www.wxapp-union.com/e.detail;
      this.setData({
        code: temp,
        currentFocus: 1
      })
    },
    // 輸入城市
    inputCity: function (e) {
      var temp = this.data.code;
      temp[1].value = http://www.wxapp-union.com/e.detail;
      this.setData({
        code: temp,
        currentFocus: 2
      })
    },

    //輸入車(chē)牌
    inputLicense: function (e) {
      var temp = this.data.code;
      var i = this.data.currentFocus
      temp[i].value = http://www.wxapp-union.com/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 = http://www.wxapp-union.com/'';
      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)
    },
  
    // 切換車(chē)牌
    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="車(chē)牌鍵盤" whetherShow="1"></nav-bar>
<view class="top-part" style="margin-top:235rpx">
	<view class="title">選擇車(chē)牌類型</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">請輸入需要辦理車(chē)輛的車(chē)牌号</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;

}
複制代碼

總結

下(xià)載代碼鍊接——車(chē)牌組件 有不足之處還希望各位老哥們指出。感謝感謝 如(rú)果大家有什麼比較實用的組件想法需要幫忙實現可(kě)以找我 PS：感謝sy老哥的切圖


作者：允樂(yuè)51939
鍊接：https://juejin.cn/post/6899629605116739597
來源：掘金
著作權歸作者所有。商(shāng)業(yè)轉載請聯系作者獲得授權，非商(shāng)業(yè)轉載請注明出處。

相關(guān)案例查看更多

相關(guān)閱讀

聯系

159-8711-8523

友情鍊接

© 2004-2024 JTBC(CMS) Ynkui.Com All Rights Reserved.