小程序获取胶囊区大小

最新推荐文章于 2025-03-07 14:43:29 发布

m573556796

最新推荐文章于 2025-03-07 14:43:29 发布

阅读量313

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/m573556796/article/details/126262900

版权

小程序专栏收录该内容

12 篇文章

订阅专栏

let res = wx.getMenuButtonBoundingClientRect();
res.top
res.height

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m573556796

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

aaa123aaasqw的博客

02-27

3939

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

[小程序] getMenuButtonBoundingClientRect获取胶囊frame的坑(开发工具的坑)

热门推荐

iOSTianNan的博客

04-22

1万+

最近需要获取小程序页面中胶囊的 frame (y,x,w,h)等数据可以通过wx提供的能力 var data = wx.getMenuButtonBoundingClientRect() console.log('菜单按键宽度：',data.width) console.log('菜单按键高度：',data.height) console.log('菜单按键上边...

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

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

Lulu_yo的博客

10-07

6677

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

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

parkbomd的博客

03-07

280

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

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

NaHCO4的博客

04-29

1万+

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

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

weixin_63515766的博客

12-10

612

小程序获取胶囊宽高

对微信小程序、头条小程序、H5的头部胶囊和高度的获取

Aimonz的博客

07-21

326

【代码】对微信小程序、头条小程序、H5的头部胶囊和高度的获取。

uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt

12-30

### uniapp中支付宝小程序与钉钉小程序标题栏自定义详解 #### 一、背景介绍在uniapp开发过程中，为了适应不同的小程序平台（如微信、支付宝、钉钉等），开发者经常需要对页面进行定制化处理，以满足不同平台的...

小程序自定义导航栏，胶囊对齐

Mgf_Yzy的博客

04-18

3455

最近在做一个小程序项目，要求自定义导航栏，自定义导航栏好说，但是想要胶囊对其就没那么简单了官方也没有给出具体的做法，然后上百度，最终将实现代码给有类似困扰各位同猿分享实现效果图 iPhone 5 iPhone 6/7/8 iPhone X iPad 想要胶囊对齐，就要搞清楚，它是由什么组成的图片，是在网上找的，自己不会作图，只为说明问题，侵联删，如有打扰，请谅解它是由状态栏和导航栏两部分组成，所以想要实现对齐，就得拿到状态栏和导航栏的高度获取状态栏高度 wx.getSyste

小程序自定义导航栏兼容适配所有机型（附完整案例）

10-15

【小程序自定义导航栏兼容适配所有机型】在开发微信小程序时，官方提供了一套标准的导航栏配置，但...同时，为了达到良好的用户体验，还需要关注字体大小、颜色以及交互效果等细节，以适应微信小程序的各种设备环境。

小程序自动化框架minium——右上角菜单(胶囊功能)转发分享

诗酒趁年华的博客

05-10

1147

项目场景：微信小程序自动化，通过右上角转发小程序/分享小程序页面问题描述在做微信小程序自动化时，涉及通过右上角更多菜单转发小程序，从而进行分享的场景，但是使用minium的native.forward_miniprogram()会报错 at.core.exceptions.UiNotFoundError: Ui Object Not Found self.page.get_element('.common-secondary-button-style').click()

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

Cheryl的加工厂

04-13

4010

<view class="search-container p-a pl-20" :style="{ top: statusHeight + 'px', height: navHeight + 'px' }" > </view> const res = wx.getMenuButtonBoundingClientRect() const statusHeight = res.top //胶囊距离顶部 const navHeight = res.height //胶囊高度 t

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

weixin_44606457的博客

04-19

837

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

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

m0_71421744的博客

09-13

1173

在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。searchBarHeight: 0, //胶囊高度。searchBarTop: 0, //状态栏高度。//获取胶囊对上高度。坐标信息以屏幕左上角为原点。

小程序胶囊适配

aaa123aaasqw的博客

05-19

202

【代码】小程序胶囊适配。

微信小程序获取顶部状态栏和胶囊的高度

M_SSY的博客

11-02

6058

标红的部分，分别是导航栏和胶囊 //获取系统信息 wx.getSystemInfo({ success: res => { this.system = res } }) //获取胶囊信息 this.menu = wx.getMenuButtonBoundingClientRect()//胶囊的高度 this.systemBar = this.system.statusBarHeight//状态栏的高度 ...

uniapp小程序获取胶囊按钮高度自定义顶部标题栏

DDDHL_的博客

04-08

1万+

小程序自带的顶部不太好康，而且能改的只要颜色和文字。很多时候设计图都是需要自定义顶部的。比如放个搜索框或者标题或者可切换的 tabs 等等。分享一下我之前的做法。

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

是江迪呀的博客

08-09

2509

theme: smartblue highlight: a11y-dark 一、前言我们在进行微信小程序开发时，常常需要自定义一些东西，比如自定义顶部导航、自定义底部导航等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型，来给大家介绍下微信小程序如何获取自定义内容的位置信息。二、开启自定义如果需要自定义顶部和底...

微信小程序 启动页倒计时胶囊