小程序自定义头部导航栏设计

一、准备好静态结构和样式，并且将默认导航栏隐藏

在页面中，准备好你的静态头部导航栏的样式，在pages.json中隐藏默认导航栏，设置导航栏的字体颜色

 准备好静态结构和样式

二、获取手机状态栏的高度和胶囊按钮的高度，计算高度

最终的样式：胶囊按钮与头部导航栏内容对齐

 高度的计算思路：

代码：

三、思路总结

小程序中封装自定义头部导航栏，需要设置安全区域，防止自定义头部导航栏的内容被手机屏幕遮挡。

所以封装的思路：首先写好静态的样式结构，根据需要设置安全区域，安全区域可以根据uniapp内置的API获得，封装好，放在合适的目录下（如components）方便在页面中服用，也可以根据需要设置插槽，方便不同的页面自定义内容。

下面是直接设置安全区域的方法：