uniapp 中编译成小程序，自定义导航栏功能

描述问题：uniapp开发小程序，因需求所需，有些界面的导航栏需要自定义，需要我们来计算导航栏高度做适配。

具体分析：（正解方案）

        原生导航栏高度 = 状态栏高度 + 导航栏高度 。

        而状态栏高度可以通过 wx.getSystemInfo() 获取   statusBarHeight  哦（uniapp 换成 uni 开头即可，不过二者都适用呢）。

        导航栏高度 = 胶囊高度 + （高度差） * 2。（ 这里是乘号 哦 ）

        胶囊信息可以通过 ： wx.getMenuButtonBoundingClientRect()  获取。这个返回了胶囊顶部距屏幕顶部距离的信息(top)

               所以，高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度。

        menu = wx.getMenuButtonBoundingClientRect(); //获取胶囊信息

        system = wx.getSystemInfo();//获取系统信息

        导航栏高度  = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight ) * 2 ;

        导航栏内容  就是内容标签 的view高度等于 menu.height 并且垂直居中 即可。

 

哈哈哈......调皮一下，说了这么多，其实与自己写出来的没有多大关系，😅，上面的分析是在自己写完后，

想了解一下其他做法，各种百度看到的。不过下次再遇到需要自定义的情况，我会优先选择上面的方案来处理的呢。

上代码：

//app.vue 文件
因为是uniapp嘛，所以选择在 app.vue 里面做操作
export default{
  globalData:{
     statusBarHeight:0,//状态栏高度
     navigationBarHeight:44,//这里先默认为44，ios 导航栏高度值,安卓和ios有点差别哦
  },
  onLaunch(){
     let that = this;
     wx.getSystemInfo({
        success(res){
           that.globalData.statusBarHeight = res.statusBarHeight;
           if(res.platform == 'ios'){
               that.globalData.navigationBarHeight == 44;
           }else if(){
               that.globalData.navigationBarHeight = 48;
           }else{
               that.globalData.navigationBarHeight = 44;
           }
        }
     })
  }
}

//需要自定义的界面，例如：index.vue
<template>
   <view class="container" :style="{'padding-top':navigationBarHeight+statusBarHeight+'px'}">
      //定义nav
      <view class="nav">
         <view :style="{'height':statusBarHeight+'px'}"></view>
         <view class="nav-container" :style="{'height':navigationBarHeight+'px','line-height':navigationBarHeight+'px'}">
             <view class="nav-left" @click="goBack">
                 <image src="放一张返回箭头的图片"></image>
             </view>
             <view class="nav-rght">
                 <text>放当前节目的名字，如 首页</text>
             </view>
             <view class="seize-seat"></view>  //这个单纯占个位置而已
         </view>
      </view>
   </view>
</template>
<script>
   export default{
      data(){
         return{
            statusBarHeight:20,
            navigationBarHeight:44,
         }
      },
      onLoad(){
           this.statusBarHeight = getApp().globalData.statusBarHeight;
           this.navigationBarHeight = getApp().globalData.navigationBarHeight;
      },
      methods:{

      }

   }
</script>
<style lang="scss">
.nav{
   position:fixed;
   top:0;
   left:0;
   background-color:#010101;
   z-index:6;
   width:100vw;
   box-sizing:border-box;
   .nav-container{
      display:flex;
      padding:0 40rpx;
      box-sizing:border-box;
      font-size:32rpx;
      color:#fff;
      align-items:center;
      justify-content:center;
      .nav-left{
         width:120rpx;
         image{
            width:18rpx;
            height:34rpx;
         }
      }
      .nav-rght{
         flex:1;
         text-align:center;
      }
      .seize-seat{
         width:120rpx;
      }
   }
}

</style>

好啦~，写完了鸭，是不是觉得有点点麻烦鸭，决定了，如果下次再遇到需要自定义导航栏的时候，我要换正解方案来试试了呢