微信小程序获取右上角胶囊距顶部的距离和胶囊的尺寸

Cheryl71

已于 2022-04-24 21:11:48 修改

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签：微信小程序

于 2022-04-13 15:15:00 首次发布

本文链接：https://blog.youkuaiyun.com/Day71/article/details/124148750

本文介绍了如何使用微信小程序的胶囊组件来实现页面顶部和导航栏的高度计算，并展示了如何在JavaScript中获取菜单按钮的边界信息。重点在于前端开发中常见的布局和元素尺寸管理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view 
	class="search-container" 
	:style="{ top: statusHeight + 'px', height: navHeight + 'px' }"
>
</view>

const res = wx.getMenuButtonBoundingClientRect()
const statusHeight = res.top //胶囊距离顶部
const navHeight = res.height //胶囊高度
this.statusHeight = statusHeight
this.navHeight = navHeight

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cheryl71

关注关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序获取胶囊信息并对齐

weixin_44850797的博客

11-25

2292

之前一直是开发app，为了裂变用户要转向小程序，才知道右上角这个东西叫胶囊接到公司需求要将上方的搜索栏和将囊对齐并且一样宽，用了position：fixed样式后发现不管是用px还是rpx还是其他单位都无法解决不同手机型号的兼容问题，这个手机对齐了，其他手机就无法对齐。最后发现原来官网有这个胶囊信息的获取uni.getMenuButtonBoundingClientRect() 链接: uniapp官网关于uni.getMenuButtonBoundingClientRect() 我是通过这个方法动态

微信小程序自定义导航栏胶囊菜单按钮高度适配问题

ayuday的博客

04-17

2074

而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了。观察发现，胶囊顶部高度距导航栏顶部高度的高度差和胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是（状态栏高度 + 导航栏高度）而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了。也就是说导航栏高度 = 胶囊高度 +（高度差）x 2。组件使用页面.json。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序尺寸控制与自定义字体，自定义导航栏

最新发布

2401_87078403的博客

06-10

722

状态栏，胶囊按钮。在微信小程序中，胶囊按钮和状态栏是页面顶部的两个关键元素，它们的尺寸和位置直接影响自定义导航栏的布局。以下是详细解释：(1) 状态栏定义：手机屏幕最顶部的系统栏，显示时间、电量、信号等系统信息。高度特点：iOS：普通机型：20px（如 iPhone 8）;刘海屏机型：44px（如 iPhone 13）；Android：高度不统一，通常为 24px 或 25px，但厂商可能修改（如小米部分机型为 `28px`）。如何获取？// 动态获取。

微信小程序右上角胶囊按钮尺寸

NaHCO4的博客

04-29

1万+

微信小程序胶囊按钮尺寸在自定义时导航栏时，往往我们为了设计的美观性，需要要求我们自己设计的导航组件在某些尺寸上能与右上角那个可爱的胶囊按钮保持一致，以下是胶囊按钮的尺寸： ...

在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App

Lulu_yo的博客

10-07

7131

【代码】在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App。

小程序获取胶囊区大小

m573556796的博客

08-10

323

小程序获取胶囊区大小。

微信小程序：自定义头部胶囊（navigationStyle=custom）/底部安全距离env(safe-area-inset-bottom)及手机适配

彭世瑜的博客

02-21

8036

自定义顶部栏之后，通过微信小程序给出的接口获取几个位置坐标（单位都是: px）用到的接口及其文档取菜单按钮（右上角胶囊按钮）的布局位置信息 Object wx.getMenuButtonBoundingClientRect() 获取系统信息 Object wx.getSystemInfoSync() 获取到的值：灰色：胶囊底部坐标 menuInfo.bottom 天空蓝：胶囊顶部坐标 menuInfo.top 绿色：状态栏高度 systemInfo.statusBarHeight 直观显示如下

随手记：小程序获取胶囊宽高

weixin_63515766的博客

12-10

646

小程序获取胶囊宽高

记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题

gcyaozuodashen的博客

10-21

1682

大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。

[微信小程序开发]如何去掉或隐藏小程序顶部栏navigationBar

03-29

小程序全局配置app.josn增加选项："navigationStyle": "custom", 具体如下：原生小程序开发打开 app.json： { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "backgroundTextStyle": ...

微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

是江迪呀的博客

03-03

9413

如果需要自定义顶部和底部导航。那么如何在自定义后能够适配不同的机型而不会出现样式问题呢？我们可以通过方法来获取页面的信息来保证样式的正确性。此方法常用于app.js文件中的onLanch()方法中，保证这些信息优先被加载，并把获取到的页面信息放到全局变量中，方便其他页面的获取使用。在此之前需要开启自定义顶部和底部导航栏。

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

10-16

本文将深入探讨如何实现微信小程序胶囊按钮返回以及首页自定义导航栏的功能。首先，我们要理解为什么要自定义导航栏。在微信小程序中，当用户从转发的商品页面进入时，由于页面栈只有一个，系统默认的返回按钮会...

uniapp 求小程序右上角的按钮距离顶部距离解决方案

m0_46365130的博客

05-11

1497

直接上代码 const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); this.headerTop = menuButtonInfo.top;

微信小程序自定义导航栏胶囊菜单按钮高度完美适配

aaa123aaasqw的博客

02-27

4350

导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2。观察发现，胶囊顶部高度距导航栏顶部高度的高度差和胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是（状态栏高度 + 导航栏高度）上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。也就是说导航栏高度 = 胶囊高度 +（高度差）x 2。

微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑

浩冉学编程的博客

03-05

4962

微信小程序如何实现自定义导航栏以及踩过的坑，获取胶囊位置计算导航栏位置，让图标始终保持靠着胶囊左边

uniapp 微信小程序 获取右上角胶囊按钮布局信息

沛沛呀、

03-26

2994

let res=wx.getMenuButtonBoundingClientRect() 返回值 width number 宽度，单位：px height number 高度，单位：px top number 上边界坐标，单位：px right number 右边界坐标，单位：px bottom number 下边界坐标，单位：px left number 左边界坐标，单位：px 具体使用： <template> <view class="cont

小程序 获取顶部胶囊的信息,设备的宽高

weixin_44606457的博客

04-19

858

里面有宽,高，top,bottom uni.getMenuButtonBoundingClientRect()

微信小程序自定义导航栏胶囊菜单按钮高度完美适配原理简单赛过一些大厂的适配妈妈再也不用担心我强迫症啦

热门推荐

TP19981017的博客

10-18

1万+

在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。不同的手机，胶囊高度也不一样，完全需要动态的计算高度。先看一些小程序顶部导航栏适配的情况图一某团图二某乎图三某东图四某拉上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。为解决这个问题就要搞清楚原理这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是（状态栏高度 + 导航栏高度）而状态栏高度可...

[保姆级教程]uniapp小程序获取右上角胶囊位置信息

肥晨开发的学习之路

06-20

2596

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。uniapp小程序获取右上角胶囊位置信息。配置中，为相应的页面设置。，这将隐藏默认的导航栏。

微信小程序右上角胶囊右间距

03-26

### 微信小程序右上角胶囊样式的修改 微信小程序中的右上角胶囊按钮是由系统控制的导航栏的一部分，其默认样式无法通过普通的 CSS 或者 JavaScript 完全自定义。然而，可以通过一些间接方法来调整与该胶囊按钮相关的布局。 #### 1. 获取状态栏高度和导航栏高度为了合理安排页面顶部的内容布局，可以先获取设备的状态栏高度以及导航栏的高度。这部分逻辑可以在 `onLoad` 生命周期函数中完成： ```javascript Page({ data: { statusHeight: 0, navHeight: 0 }, onLoad() { const sysinfo = uni.getSystemInfoSync(); const statusHeight = sysinfo.statusBarHeight; const isiOS = sysinfo.system.indexOf('iOS') > -1; let navHeight = isiOS ? 44 : 48; this.setData({ statusHeight, navHeight }); } }); ``` 上述代码片段用于动态计算状态栏和导航栏的高度[^3]。 #### 2. 设置页面顶部容器的 padding 由于右上角胶囊按钮的位置固定在屏幕右侧边缘附近，因此可以通过为页面顶部的主要内容区域设置合适的 `padding-right` 来避免内容与其重叠。例如，在 WXML 文件中定义一个顶层容器，并为其应用特定的样式： ```html <view class="top-container">  </view> ``` 对应的 WXSS 样式如下所示： ```css .top-container { padding-top: calc(var(--status-bar-height) + 50px); /* 状态栏高度加上导航栏高度 */ padding-right: 100rpx; /* 调整此值以改变与胶囊的距离 */ } ``` 这里使用了 `calc()` 函数结合变量 `--status-bar-height` 和固定的数值（如 `50px`），从而确保即使不同机型具有不同的状态栏高度也能适配良好。同时设置了较大的 `padding-right` 值作为示例，实际项目可根据需求微调这个距离。 #### 3. 使用 custom-tab-bar 替代原生导航栏如果希望完全掌控右上角区域的设计，则可以选择隐藏掉系统的导航栏并实现自己的定制化 tab bar 组件。具体操作是在 app.json 中关闭默认导航栏显示： ```json { "window": { "navigationStyle": "custom" } } ``` 之后自行绘制包含返回键、标题以及其他功能按键的新头部结构即可[^1]。 --- ### 注意事项尽管能够通过以上方式影响到右上角胶囊附近的视觉效果，但直接更改胶囊本身的外观仍然受限于平台政策规定。对于大多数应用场景而言，推荐遵循官方设计指南来进行界面优化而不是强行改造内置控件的行为模式[^2]。