preface

Generally speaking, the navigation bar in wechat mini program is the default display title and so on. The style change can only be realized by configuring some officially provided properties. In addition, the applet also provides navigationStyle property to allow users to customize the implementation of the navigation bar. Here’s the code for implementing an immersive navigation bar.

Display effect

Document describing

The files involved are app.json license-plate.js license-plate. WXML license-plate. WXSS (these three are packaged components) input-license.js input-license. WXML Input-license. WXSS (These three are the pages that call the component, and also involve the data transfer in the component, In addition, input-license. WXSS introduced app. WXSS this is according to my habit to write some layout naming method will not be posted in the article

File code

JSON file

app.json

You can import components in the global JSON file or you can import them separately on a page. I’m using the global app.json file

  "usingComponents": {
    "license-plate":"/component/license-plate/license-plate"
  },
Copy the code

Component code

license-plate.js

// component/license-plate/license-plate.js
Component({
  /** * Component property list */
  properties: {},/** * The initial data of the component */
  data: {
    firstRow: [].secondRow: [].thirdRow: [].fourthRow: [].currentFocus:0.tabIndex:'0'    //0- Blue card, 1- New energy
  },

  /** * list of component methods */
  methods: {
    // Enter the province
    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: ['Sue'.'Beijing'.'jin'.'Shanghai'.'the wing'.'chongqing'.'black'.', '.'the liao'].secondRow: ['jin'.'green'.'and'.'anhui'.'zhejiang'.'min'.'jiangxi'.'xiang'.'鄂'].thirdRow: ['yue'.'Joan'.'甘'.'shan'.'you'.'the cloud'.'sichuan'.'Mongolia'].fourthRow: ['new'.'hide'.'better'.'laurel'.'Hong Kong'.'Australia']})}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
    },

    / / enter the market
    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
      })
    },

    // Enter the license plate
    inputLicense:function(e){
      if(e.currentTarget.dataset.name! ='O') {/ / the blue card
        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) {/ / new energy
          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: ['Sue'.'Beijing'.'jin'.'Shanghai'.'the wing'.'chongqing'.'black'.', '.'the liao'].secondRow: ['jin'.'green'.'and'.'anhui'.'zhejiang'.'min'.'jiangxi'.'xiang'.'鄂'].thirdRow: ['yue'.'Joan'.'甘'.'shan'.'you'.'the cloud'.'sichuan'.'Mongolia'].fourthRow: ['new'.'hide'.'better'.'laurel'.'Hong Kong'.'Australia']})this.triggerEvent('backspace'.this.data.currentFocus)
      }
      else{
        return; }},closeKeyBoard:function(){
      this.triggerEvent('closeKeyBoard')}}})Copy the code

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">cancel</view>
		<view class="font30 fontblue" bindtap="closeKeyBoard">determine</view>
	</view>
	<! -- Province keyboard -->
	<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>
	<! -- Urban keyboard -->
	<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>
	<! -- License plate keyboard -->
	<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>
Copy the code

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;
}
Copy the code

Page code

input-license.js

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

  /** * initial data for the page */
  data: {
    tabIndex: '0'.code: [{ value: ' ' }, { value: ' ' }, { value: ' ' }, { value: ' ' }, { value: ' ' }, { value: ' ' }, { value: ' '}].currentFocus: 0.isFocus: false.showKeyBoard: false.license_color: '0'.license_plate: ' '
  },

  /** * lifecycle function -- listens for page loading */
  onLoad: function (options) {},// Enter the province
    inputProvince: function (e) {
      var temp = this.data.code;
      temp[0].value = e.detail;
      this.setData({
        code: temp,
        currentFocus: 1})},// Enter the city
    inputCity: function (e) {
      var temp = this.data.code;
      temp[1].value = e.detail;
      this.setData({
        code: temp,
        currentFocus: 2})},// Enter the license plate
    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
    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)
    },
  
    // Switch the license plate
    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'}}})Copy the code

input-license.wxml

<! --pages/component/input-license/input-license.wxml-->
<nav-bar title="License plate keypad" whetherShow="1"></nav-bar>
<view class="top-part" style="margin-top:235rpx">
	<view class="title">Select license Plate Type</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">Please enter the license plate number of the vehicle to be processed</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>
Copy the code

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: 1.2 s infinite focus; 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; }Copy the code

conclusion

Download code link – license plate components have shortcomings also hope you old friends pointed out. Thank you thank you if you have any more practical component ideas need to help realize you can ask me PS: thanks sy brother’s cut map