自定义导航栏分两种，一种是单独某个页面做一个自定义导航；一种是所有页面的导航栏都是自定义样式
如果是所有页面的导航栏都要自定义，在app.json里找到window样式
"navigationStyle":"custom"
所有页面的就需要先自定义组件了，这里先不做详说，因为我目前项目中只是首页需要自定义导航栏，这里我先详说这个
在你想自定义的页面的json文件中写"navigationStyle":"custom"
这样当前页面自带的导航栏就没有了，然后需要你在wxml页面中就可以开始写样式了
自定义导航栏样式
<!-- 自定义导航栏 -->
<view class="navStyle" style="height:{{navHeight}}px">
<view class="navFix" style="height:{{navHeight}}px;margin-top:{{imgTop}}px;">
<image src=""></image>
<view style="margin-top:{{cityTop}}px;">
全国
{{cityName}}
</view>
</view>
</view>
计算自定义导航栏高度
// 获取状态栏高度
const { statusBarHeight } = wx.getSystemInfoSync();
// 得到右上角菜单的位置尺寸
const menuButtonObject = wx.getMenuButtonBoundingClientRect();
console.log('右上角菜单的尺寸：',menuButtonObject);
const { top, height } = menuButtonObject;
// 计算导航栏的高度
// 此高度基于右上角菜单在导航栏位置垂直居中计算得到
const navBarHeight = height + (top - statusBarHeight) * 2;
// 计算状态栏与导航栏的总高度
const statusNavBarHeight = statusBarHeight + navBarHeight;
this.setData({
navHeight:statusNavBarHeight,
imgTop:statusNavBarHeight-45,
cityTop:statusNavBarHeight-45-25
})
