小程序如何自定义navber，使用了navber需要注意的点-优快云博客

本文详细介绍了在页面中自定义导航栏的方法，包括设置`navigationStyle`为`custom`，处理因头部消失导致的布局问题，以及如何计算盒子高度以适配状态栏和胶囊按钮。同时，讨论了如何配置首页按钮，包括图标选择和点击事件，并提供了处理导航栏与页面元素相对位置的技巧，如使用`fixed`定位和`padding-top`。

如何定义navber呢？

在需要自定义navber的页面里json文件的配置项里添加
navigationStyle值为custom
在这里插入图片描述

export default {
  navigationStyle:'custom',
  }

添加属性之前
在这里插入图片描述
添加属性之后（会发现页面都上去了，原因是因为他的头部的占位模块已经消失了）

现在就需要存放一个盒子了，存放一个盒子将下面元素给挤下来（这里的home按钮也需要自己配置）。

使用了navber需要注意的点

盒子的高度该给多少呢？

状态栏的高度+胶囊的高度=navber的高度
也可以胶囊的上边界坐标+胶囊的高度=navber的高度
获取状态栏的高度wx.getSystemInfoSync()
在这里插入图片描述

wx.getMenuButtonBoundingClientRect()
获取胶囊高度wx.getMenuButtonBoundingClientRect()

胶囊的上边界坐标+胶囊的高度=navber的高度

//状态栏的高度+胶囊的高度=`navber`的高度
const navberHight = wx.getSystemInfoSync().statusBarHeight + wx.getMenuButtonBoundingClientRect().height

盒子一定要给fixed定位，不然的话他会跟着你的页面滚动而滚动。

添加定位以后盒子会弹上来

如何解决这个问题呢？
给下面的元素添加padding，把盒子挤下去（padding-top的参数就是navber的高度）

在这里插入图片描述

home按钮该怎么配置呢？

在这里插入图片描述

这些按钮就是从阿里图标库里扒出来的图标添加个单击事件就可以了
在这里插入图片描述
这样就可以，自己通过条件来判断是否要展示返回按钮还是home按钮。