uniapp小程序获取titleBar的高度和宽度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp小程序获取titleBar的高度和宽度相关的知识，希望对你有一定的参考价值。
参考技术A 就是小程序上方由胶囊占据的bar，就叫titleBar。因为我们可以在胶囊左侧写标题和其他一些东西。这些东西要跟胶囊中线对齐。
首先我们要撑起statusBar的高度，也就是最顶部的那个bar。这个bar的高度很容易取得。
uni.getMenuButtonBoundingClientRect().top取得的是胶囊距离视口顶部的距离，减掉statusBar的高度，就是胶囊离statusBar下沿的距离。这个距离乘以2，加上胶囊自身高度，就是titleBar的高度。
见红色部分。
开发者工具中会有略微错位，无妨，以真机为准。
我们希望胶囊左侧空白区域与胶囊有间距，而且间距最好是等于胶囊到右边边线的距离。这个前提下，左侧空白区域的宽度怎么算？
写成组件就是这样：
用法：
演示如何使用作用域插槽：
以上是关于uniapp小程序获取titleBar的高度和宽度的主要内容，如果未能解决你的问题，请参考以下文章