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

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

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

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

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

见红色部分。

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

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

写成组件就是这样：

用法：

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

说明这个小程序可能在后台完整性上做的不是很好，具体表现有以下这些方面：

1、页面运营内容/数据不完整

小程序仅有页面title、底部button， 但中间无具体运营内容。包括但不限于页面提示“无任何商品”“加载完了”或页面中间为空白。

优化建议：建议开发者上传有效商品/运营数据后，再重新提交代码审核。

2、页面加载不出来

（1）进入服务页面一直提示“加载中”或“无法加载”等情形，无法加载出现完整页面内容信息，无法正常体验小程序服务内容。

（2）页面白屏：打开页面空白，无任何内容报错信息，无法正常体验小程序功能服务。

3、控件无响应

小程序页面点击页面或功能显示无响应等，无法进一步体验小程序服务内容。

以上情况都属于开发或后台未调配好，需要运营者提高关注和重视。

---