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

一、在 app.json 的 window 对象中定义导航的样式：

这样你会发现所有页面的导航栏都不见了。如果还有其他页面需要导航栏的，那就模仿小程序的导航栏按照以下步骤。

二、首先要在 app.js 的 onLaunch 方法里面获取手机状态栏高度，全局定义导航高度 navHeight ：

注意！！！全局定义导航高度 navHeight ！！！

我发现很多人会遇到 navHeight 是 undefined 这个问题。在这里说明一下，这个 navHeight 需要在 app.json 里面定义好：

三、在需要导航的 页面 Page 拿到全局变量导航高度：

四、页面展示：

五、附上样式，可以写在 app.wxss ：

六、界面效果：

自定义导航栏分两种，一种是单独某个页面做一个自定义导航；一种是所有页面的导航栏都是自定义样式

如果是所有页面的导航栏都要自定义，在app.json里找到window样式

"navigationStyle":"custom"

所有页面的就需要先自定义组件了，这里先不做详说，因为我目前项目中只是首页需要自定义导航栏，这里我先详说这个

这样当前页面自带的导航栏就没有了，然后需要你在wxml页面中就可以开始写样式了

<!-- 自定义导航栏 -->

    <view class="navStyle" style="height:{{navHeight}}px">

      <view class="navFix" style="height:{{navHeight}}pxmargin-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

        })

---