微信小程序-自定义导航栏

参考文章：自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例） | 微信开放社区 (qq.com)

1. 设置导航栏样式自定义

"navigationStyle": "custom"

可以选择在页面json文件设置，也可选择在app.json文件设置，我选择 页面配置

2. 定义想要的导航栏样式

.navCustom {
  position: fixed; 
  top: 0; 
  width: 100%;
  color: white;
  font-weight:bold;
  background: linear-gradient(to right, rgb(6, 194, 113) 30%, rgb(2, 169, 146));
}

最初最想要的是导航栏颜色渐变

3. 计算导航栏高度

    const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;

此处选择在app.js文件（小程序启动时）计算并存储在全局变量中

4. 页面引入全局变量的导航栏高度

  data: {
    navBarHeight: getApp().globalData.navBarHeight,
  },

5. 布局

<view class="navCustom" style="height:{{navBarHeight}}px;">
  <view style="position: absolute; bottom: 10rpx; padding-left: 20rpx; width: 100%; display: flex; ">
    <image src="/images/logo.png" mode="" style="width: 60rpx; height: 60rpx;"/>
    <view style="height: 60rpx; display: flex; align-items: center; margin-left: 15rpx;">
      <text>公司名称</text>
    </view>
  </view>
</view>
<view style="margin-top:{{navBarHeight}}px;"></view>

对于要显示的内容（此项目中的logo、文字等），采取绝对布局，且是相对于底部的，这样才能在PC预览中得到想要的效果

最终效果：

PC端预览