uniapp小程序获取titleBar的高度和宽度

就是小程序上方由胶囊占据的bar，就叫titleBar。

因为我们可以在胶囊左侧写标题和其他一些东西。这些东西要跟胶囊中线对齐。

首先我们要撑起statusBar的高度，也就是最顶部的那个bar。这个bar的高度很容易取得。

uni.getMenuButtonBoundingClientRect().top取得的是胶囊距离视口顶部的距离，减掉statusBar的高度，就是胶囊离statusBar下沿的距离。这个距离乘以2，加上胶囊自身高度，就是titleBar的高度。

见红色部分。

开发者工具中会有略微错位，无妨，以真机为准。

我们希望胶囊左侧空白区域与胶囊有间距，而且间距最好是等于胶囊到右边边线的距离。这个前提下，左侧空白区域的宽度怎么算？

写成组件就是这样：

用法：

演示如何使用作用域插槽：

可以不要

顶部导航栏

App：可以保留导航栏，也可以去掉，可拓展性强，灵活性高。

小程序：导航栏右侧有个无法去除和编辑的胶囊（titlebar），设计时也不能在导航上增加其他功能。所以在App转小程序时，导航栏的功能要换位置或者在放在导航栏下。

---