欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序——車牌鍵盤組件實(shí)現(xiàn) - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

微信小程序——車牌鍵盤組件實(shí)現(xiàn)

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：49

微信小程序中導(dǎo)航欄一般來(lái)說(shuō)是默認(rèn)的展示標(biāo)題等等，可以做的樣式改變僅僅能通過(guò)配置一些官方提供的屬性來(lái)實(shí)現(xiàn)。除此之外小程序還提供了navigationStyle這個(gè)屬性可以讓用戶去自定義的實(shí)現(xiàn)導(dǎo)航欄。下面直接奉上代碼來(lái)說(shuō)明實(shí)現(xiàn)沉浸式導(dǎo)航欄。

展示效果

文件說(shuō)明

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


文件代碼

JSON文件

app.json

可以在全局的json里引入組件也可以在某個(gè)頁(yè)面去單獨(dú)引入，我這里是把組件引在了全局里 app.json

  "usingComponents": {
    "license-plate":"/component/license-plate/license-plate"
  },
復(fù)制代碼

組件代碼

license-plate.js

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

  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    firstRow:[],
    secondRow:[],
    thirdRow:[],
    fourthRow:[],
    currentFocus:0,
    tabIndex:'0'    //0-藍(lán)牌，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'){
        //藍(lán)牌
        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')
    }

  }
})

復(fù)制代碼

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>
	<!-- 市區(qū)鍵盤 -->
	<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>
復(fù)制代碼

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;
}
復(fù)制代碼

頁(yè)面代碼

input-license.js

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

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    tabIndex: '0',
    code: [{ value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' }],
    currentFocus: 0,
    isFocus: false,
    showKeyBoard: false,
    license_color: '0',
    license_plate: ''
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  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
      })
    },

    //輸入車牌
    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)
    },
  
    // 切換車牌
    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'
      }
    },
})
復(fù)制代碼

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">請(qǐng)輸入需要辦理車輛的車牌號(hào)</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>
復(fù)制代碼

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;

}
復(fù)制代碼

總結(jié)

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


作者：允樂51939
鏈接：https://juejin.cn/post/6899629605116739597
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

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