uniapp微信小程序获取胶囊高度

我就爱吃稀饭

已于 2024-09-13 09:10:35 修改

阅读量324

点赞数 11

文章标签： uni-app 微信小程序小程序

于 2024-09-13 09:08:32 首次发布

本文链接：https://blog.csdn.net/m0_71421744/article/details/142200304

版权

getMenuButtonBoundingClientRect()

在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。

坐标信息以屏幕左上角为原点。

文档：getMenuButtonBoundingClientRect() | uni-app官网

代码：

data() {
           return {
               searchBarTop: 0, //状态栏高度
               searchBarHeight: 0, //胶囊高度

           };
       },
       onLoad() {
           let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
           //获取胶囊对上高度
           this.searchBarTop = menuButtonInfo.top;
           //获取胶囊高度
           this.searchBarHeight = menuButtonInfo.height;

       },

效果图：