前言

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