标签 navigationStyle 下的文章

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后,导航栏消失,可以自定义导航栏。

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


- 阅读剩余部分 -