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

Cheryl71

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

阅读量3.9k

点赞数 1

文章标签：微信小程序

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

本文链接：https://blog.csdn.net/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

2243

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

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

ayuday的博客

04-17

1813

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

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

微信小程序获取胶囊高度wx.getMenuButtonBoundingClientRect()

最新发布

parkbomd的博客

03-07

213

【代码】微信小程序获取胶囊高度wx.getMenuButtonBoundingClientRect()

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

NaHCO4的博客

04-29

1万+

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

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

Lulu_yo的博客

10-07

6587

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

小程序获取胶囊区大小

m573556796的博客

08-10

311

小程序获取胶囊区大小。

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

彭世瑜的博客

02-21

7923

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

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

gcyaozuodashen的博客

10-21

1494

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

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

03-29

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

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

10-16

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

微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

10-15

本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...

微信小程序自定义顶部组件customHeader的示例代码

11-20

2. **获取右上角胶囊按钮的位置信息**：胶囊按钮（通常包含“返回”和“更多”图标）的位置信息可以通过`wx.getMenuButtonBoundingClientRect()`方法获取。这个信息包括胶囊的宽度、高度、顶部和左侧距离，这对于...

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

weixin_63515766的博客

12-10

606

小程序获取胶囊宽高

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

m0_46365130的博客

05-11

1471

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

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

aaa123aaasqw的博客

02-27

3876

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

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

浩冉学编程的博客

03-05

4517

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

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

沛沛呀、

03-26

2919

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

834

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

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