小程序设置 navigationStyle 是 custom 的时候，没有顶部标题栏，只有右侧的胶囊按钮。
这个胶囊按钮的位置在Android和iOS上不一样；有没有“齐刘海”高度也不一样。
如果自己做的设计需要与胶囊对齐，该怎么做呢？
wx.getSystemInfo 接口返回的 statusBarHeight （基础库1.9.0以上）可以用到这里。代码如下
wx.getSystemInfo({ success: function (res) { // console.log(res.model) // console.log(res.pixelRatio) // console.log(res.windowWidth) // console.log(res.windowHeight) // console.log(res.language) // console.log(res.version) console.log(res.platform) console.log(res.statusBarHeight) let nav_top = res.statusBarHeight + 4; if(res.platform.toLowerCase() == 'android'){ nav_top += 4; } _this.setData({ global_top: nav_top }) } }) |
效果如下：
在真机测试发现：
iOS 设置fixed定位的紫色横条top为： statusBarHeight + 4px 可以跟右侧胶囊顶部对齐。
在Android系统，需要设置top值为： statusBarHeight + 4px + 4px 才能对齐。
原因未知。
以上代码在开发工具调试，对不起，对不齐。原因未知，以真机测试为准吧。
statusBarHeight可以通过wx.getSystemInfo()直接获取就不多说了
胶囊所在的区域高度是titleBarHeight，安卓48px，ios44px
例子：
<view class='custom-navigation'>
<view class='status-bar'>
</view>
<view class='title-bar'>
</view>
<view>
title-bar里flex布局就解决了。
注：关于titleBarHeight的尺寸，打印wx.getSystemInfo()的windowHeight，对比一下 navigationStyle 为custom 和 非custom 情况下同一机型的数值，两者差值 - statusBarHeight = titleBarHeight，可以自行尝试一下
理论上可以用这个 wx.getMenuButtonBoundingClientRect() 方法得到胶囊的位置及宽高, 其中最有用的该是`top`定位的值了.
真机调试下 iphone8p基本库版本`2.3.2`下有时到top=24,有时是0,这就很尴尬了,不稳定的数据也不能用啊...
那样的话想问下，标题栏的高度是怎么计算呢，固定的一个值吗？
上面已经给出来了啊，判断Android还是iOS区别对待就行了。
遇到了同样的问题
根据设计图（https://developers.weixin.qq.com/miniprogram/design/image/13titlebar.jpg） 可以看出titleBar的顶部高度是根据物理尺寸定的，并且可能又根据是否有刘海有了优化。
所以在自定义标题栏的情况下，一般希望标题能与胶囊对齐，但是现在这样根本无法准确获取胶囊位置，也就没有办法设定标题栏的高度，希望提供 getTitleBarPosition 之类的 API
mark，遇到了同样的问题，标题栏的定位和高度在不同系统不同机型下的表现不一致，在custom模式下，UI要求我们和胶南的水平基准线一致
你还没遇见安卓中沉浸式和非沉浸式的区别呢,安卓要适配的多了去了
愿闻其详
和产品沟通了下,去掉自定义导航栏了,反正我们的导航本身就是白色,也没要求要跟随页面背景改变,只是登录页面有导航栏不好看,但是登录页面背景是白色的,所以就完美解决了
用默认导航栏时，有一种场景经常出现：普通的二级页面，左上角是有返回箭头的。但是从分享的卡片直接进入，没有到一级页面的导航了。这时候就想做一个自定义的导航栏，增加去首页的按钮。
是有这种情况,但是可以检测到打开这个页面的来源,如果来源是分享或者什么符合条件的就在在页面内添加一个按钮往首页跳转