微信小程序实现自定导航栏（适合多种机型）

微信小程序实现自定导航栏

我们在开发小程序的时候，有时候会遇到需要自定义导航栏的需求，这样我们就要开始全局属性的自定义属性


我们需要在全局app.json开启自定义

开启全局之后，界面只保留状态栏和胶囊，同时原来的界面会发生影响，直接置顶了。

所以我们需要自定义一个nav组件（名字随机取）,

接着对nav组件进行界面布局， 我这边是我个人的业务代码，可以根据自己的业务需求进行布局，
nav.wxml

<view style="height:{{navHeight}}px;background-color:red;color:white" class="nav"> 
  <block> 
    <view wx:if="{{title}}" class="title" style="margin-top:{{navTop+capsuleHeight/4}}px">{{title}}</view> 
    <view wx:else class="btn" style="margin-top:{{navTop+capsuleHeight/4}}px"> 
      <view> 
        <image src="/images/sousu.jpg" bindlongtap="clickSearch"></image> 
      </view> 
      <view> 
        <image src="/images/wode.jpg"></image> 
        <image src="/images/wode.jpg"></image> 
      </view> 
      <view></view> 
    </view> 
  </block> 
</view>

nav.wxss

/* components/nav/index.wxss */ 
.nav{ 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  overflow: hidden; 
  z-index: 10; 
} 
.title{ 
  width: 100%; 
  text-align: center; 
} 
.btn{ 
  width: 100%; 
  /* height: 100%; */ 
  display: flex; 
  flex-direction: row; 
} 
.btn view{ 
  flex: 1; 
  box-sizing: border-box; 
} 
.btn view image{ 
  height: 40rpx; 
  width: 40rpx; 
} 
.btn view:nth-of-type(1) image{ 
  display: inline-block; 
  padding-left: 40rpx; 
} 
.btn view:nth-of-type(2) { 
   display: flex; 
   justify-content:  space-around; 
}

接下来需要对导航栏的高度进行计算。

整个导航栏的高度为1+2；

1. 整个导航栏的高度；
2. 胶囊按钮与顶部的距离；
3. 胶囊按钮与右侧的距离。
   小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo() 获取设备信息。

计算公式：
通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；
2. 胶囊按钮与顶部的距离 = top；
   3.胶囊按钮与右侧的距离 = windowWidth - right。
   可参考进行计算：
   (图表参考别人的)
   
   最后你需要在全局app.js中定义这些高度：
   
   在nav组件中在app.json注册为全局组件：
   
   这样的话就可以在相应的界面进行注册组件了：
   
   我这里nav是采用display:fixed,所以我在nav下面的容器增加了margin-top/padding-top，高度为导航栏的高度。

注意点，增加nav组件的页面，引用了nav的高度，需要通过getApp()方法获取全局属性值。