微信小程序自定义顶部导航栏（兼容适配所有机型）

为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。

1： 在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，保留右上角胶囊状的按钮
2： Q：如果改变胶囊体颜色？

A：胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 “navigationBarTextStyle”:“white/black”;

注：如果自定义导航栏，页面自带的返回按钮也会消失，需要用代码编写！！！！

<view class="custom-navbar-container">
  <!-- 状态栏占位元素 -->
  <view class="custom-status-bar" style="height: {{ statusBarHeight }}px"></view>
  <!-- navigationBar -->
  <view class="custom-navbar" style="height: {{ navbarHeight }}px">
    <text class="custom-icon"> 返回 </text>
    <text class="custom-title">我是标题</text>
  </view>
</view>

.custom-navbar-container {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

.custom-status-bar {
  width: 100%;
  background-color: skyblue;
  text-align: center;

}

.custom-navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: pink
}

.custom-icon {
   position: absolute;
   left: 20rpx;
   color: red;
}

    const { statusBarHeight} = this.getStatusbarHeight()
    this.setData({
      statusBarHeight
    })
     // 小程序右上角的那么烦人的胶囊信息
    const { height, top } = this.getMenuButton()
    this.setData({
      navbarHeight: (top - this.data.statusBarHeight) * 2 + height
    })

参考: https://blog.csdn.net/weixin_39872588/article/details/80500164?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduend~default-1-80500164.nonecase&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%8A%B6%E6%80%81%E6%A0%8F%E9%AB%98%E5%BA%A6&spm=1000.2123.3001.4430