UPDATE 2022/11/27

这篇文章内容已经过时，不再具有参考意义。
实际上实现起来非常简单，只需要调用wx.getMenuButtonBoundingClientRect()方法获取胶囊的位置信息，再给相关的 wxml 节点加上合适的高度即可，例如：

<!-- 假如这是页面标题 -->
<view class="title" style="margin-top:{{胶囊距离顶部的高度}};height:{{胶囊自身高度}}px"></view>

/* wxss */
.title{
    display: flex;
    align-items: center;
}

以下是原内容

navigationStyle(官方文档)设置为custom后，导航栏消失，可以自定义导航栏。

在不同的手机上，胶囊到屏幕顶部的距离是不一样的，尤其是刘海屏，这个距离会很大。所以自定义导航栏的高度不能写死。页面主体部分不能被右上角的胶囊覆盖；为了美观，自定义导航栏的标题最好也和胶囊在水平上对齐。所以，自定义导航栏的高度需要适配。

- 阅读剩余部分 -