小程序修改顶部导航栏

微信头部导航栏可能通过json配置：

1若仅修改字体以及背景颜色
在页面的json文件中添加navigationBarTitleText改变文字
在页面的json文件中添加backgroundColor改变颜色

2自定义顶部导航栏
步骤：
1.在 app.json 里面把 “navigationStyle” 设置为 “custom”
这样子之后就只会保留右上角胶囊按钮了。
2.计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

如下图：

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo() 获取设备信息。

如下图：

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

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right。

其中需要重点知道statausBarHeight指的是最顶部的设备时间wifi那些

App({
  globalData: {
    
  },
  onLaunch: function () {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
 
        //导航高度
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
          // console.log(statusBarHeight)
          // console.log(menuButtonObject.height)
          // console.log(menuButtonObject.top)
          // console.log(statusBarHeight)
          // console.log(navHeight)
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;        //navTop
        this.globalData.windowHeight = res.windowHeight;
      },
      fail(err) {
        console.log(err);
      }
    })
  }
})
原文链接：https://blog.csdn.net/qq_42543264/article/details/104005296

最后因为设置了自定义导航 所以所有页面都需要设置顶部的导航栏
因此将顶部导航栏封装为组件

<view class="navbar custom-class" style='height:{{navHeight}}px;background-color:{{bgColor}}'>
  <view wx:if="{{showNav}}" class="navbar-action-wrap navbar-action-group row item-center" style='top:{{navTop}}px;background-color:rgba(255,255,255,.6)'>
      <ss-icon name="back" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item" bind:click="_navBack"></ss-icon>
      <ss-icon name="index" color="{{iconColor}}" size="15px" block="{{true}}" class="navbar-action_item last" bind:click="_toIndex"></ss-icon>
  </view>
  <view class='navbar-title' style='top:{{navTop}}px'>
    {{pageName}}
  </view>
</view>
原文链接：https://blog.csdn.net/qq_42543264/article/details/104005296

参数	说明	类型	默认值
page-name	当前页面名称	String
show-nav	是否显示左侧图标	Boolean	true
bg-color	导航背景颜色	String	#fff
icon-color	左侧图标颜色	String	#000
custom-class	导航样式