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

最新推荐文章于 2024-07-21 23:26:15 发布

iOSTianNan

最新推荐文章于 2024-07-21 23:26:15 发布

阅读量1.5w

点赞数 2

分类专栏： JavaScript 文章标签： wx.getMenuButtonBoundingClientRect 小程序胶囊大小

本文链接：https://blog.csdn.net/iostiannan/article/details/89452295

版权

本文讲述了在小程序开发中遇到wx.getMenuButtonBoundingClientRect返回数据不准确的问题，尤其是在开发工具中显示错误的数据。开发者需要注意将比例设置为100%，直接使用打印的数据可能导致错误。即使通过变量也可能存在错误，建议避免手动设定数值，以防止模拟器带来的坑。

摘要由CSDN通过智能技术生成

最近需要获取小程序页面中胶囊的 frame (y,x,w,h)等数据

可以通过wx提供的能力

    var data = wx.getMenuButtonBoundingClientRect()
    console.log('菜单按键宽度：',data.width)
    console.log('菜单按键高度：',data.height

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iOSTianNan

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序全屏页面及自定义顶部标题栏（附getMenuButtonBoundingClientRect实现）

laishaojiang的博客

01-07

1万+

前段时间UI同学拿着知乎热榜小程序来问我，说现在小程序怎么这么牛皮了，居然可以把搜索栏放在顶部标题栏上面去了，然后质问我怎么不告诉她这个功能，因为她说要是早发现可以这样，她的设计就可以有很多方便的地方了。我有种不好的预感，接下来刚上线不久的项目可以要大改- -！这是知乎热榜小程序，其实这并不是把搜索栏放在了顶部标题栏里面，而是把小程序把设置为全屏模式，只保留右上角的胶囊...

小程序开发API之获取菜单胶囊的布局位置信息wx.getMenuButtonBoundingClientRect()

M.Siebel

01-22

1万+

Object wx.getMenuButtonBoundingClientRect() 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 wx.getMenuButtonBoundingClientRect属性菜单按钮的布局位置信息示例 index.wxml <button bindtap='btnClick1' type="primary">获取菜单按...

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

【小程序】解决微信小程序wx.getMenuButtonBoundingClientRect()获取胶囊信息返回值错误问题

最新发布

Aimonz的博客

07-21

202

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

uniapp自定义导航栏 | uni.getSystemInfo() | wx.getMenuButtonBoundingClientRect()

weixin_51364974的博客

09-03

2200

一.自定义导航栏的区域上面整体就是自定义导航栏的区域(包括状态栏) 胶囊接口 /*获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点 */ wx.getMenuButtonBoundingClientRect(); /* 返回值：width、height、top、right、bottom、left*/ 状态栏接口 wx.getSystemInfo({ success: e => { console.log(e.statusBarHeight);/*状态栏高度

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

03-29

原生小程序开发打开 app.json： { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000", "navigationStyle": "custom...

uni开发微信小程序解决全局分享分销问题

01-03

uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实现 1.技术点： vueX ...

taro开发微信小程序的实践

10-16

《Taro开发微信小程序实践详解》 Taro是一款开源的多端开发框架，它使得开发者可以使用React的开发方式编写一次代码，就能实现微信小程序、H5、React Native等多端的应用。本文将深入探讨使用Taro开发微信小程序的...

自定义导航--wx.getMenuButtonBoundingClientRect() 万机兼容

沉睡的博客

07-06

1898

官方文档： https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html 自定义导航使用此接口做css参数定位，部分机型无法获取，或者说是无法及时获取到参数，导致导航栏定位出错采用过的方案：每个需要自定义导航的页面重新get，不行；默认一个...

微信小程序自定义头部导航，以及ios中wx.getMenuButtonBoundingClientRect()方法有时候获取返回0的解决方案

填了个大空℃

11-01

1128

微信小程序自定义导航栏 wx.getMenuButtonBoundingClientRect() 有时候在ios会返回所有信息都是0 globalData: { navBarHeight: 0, // 导航栏高度 menuTop: 0, // 胶囊距导航栏间距 menuBottom: 0, // 胶囊距底部间距（保持底部间距一致） menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuWidth: 0, // 胶囊长度 menuHeight:

wx.getMenuButtonBoundingClientRect()获取的微信小程序胶囊布局位置信息在页面上的具体展现

weixin_48009166的博客

12-14

1468

wx.getMenuButtonBoundingClientRect()获取的胶囊位置信息在实际页面具体指哪里，知道位置后可以获取手机的状态栏高度（就是手机电量那栏），经过一番加减就可以得出自己需要的自定义导航栏高度了。bottom是以胶囊最右边的像素到屏幕最上边的距离。right是以胶囊最右边的像素到屏幕最左边的距离。left是以胶囊最左边的像素到屏幕最左边的距离。top是以胶囊最上边的像素到屏幕最上边的距离。uniapp

uniapp自定义顶部导航并解决打包成apk后getMenuButtonBoundingClientRect方法失效问题

请叫我欧皇！的博客

01-05

1298

需求：要在app上的顶部导航提示哪里添加一些东西进去，用uniapp自带的肯定不行啊，所以自定义了所有的页面的顶部导航，之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方法才实现，记录一下。

offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRec...

weixin_34197488的博客

01-14

170

开篇提示：以下内容都经个人测试，参考API文档总结，但还是不能保证完全正确，若有错误，还请留言指出_______________________________________________________________________________________ offset[Parent/Width/Height/Top/Left] 测试代码： <!DOCTYPE ...

getBoundingClientRect()方法详解

weixin_44222717的博客

12-26

1896

一.getBoundingClientRect()分析 getBoundingClientRect()获取元素位置，这个方法没有参数 getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个...

getBoundingClientRect()

Blog

03-27

3499

getBoundingClientRect()是用来获取页面元素的位置的方法.这个方法最终返回的是一个矩形对象,包括四个属性:left top right bottom. top：元素上边到视窗上边的距离; right：元素右边到视窗左边的距离; bottom：元素下边到视窗上边的距离; left：元素左边到视窗左边的距离; width：边界矩形的宽度 height：边界矩形的高度...

解决小程序自定义导航栏和右边胶囊高度一致

Blablabla_的博客

10-09

7943

名词解释： 1.statusBarHeight：状态栏高度（小程序可获取），是指顶部显示手机信号，时间，电量的那一个小的状态条的高度。如图红色部分。 2.titleBarHeight：标题栏高度（小程序获取不到），是从状态栏的底部开始的，到标题栏的底部的高度为止。如图绿色部分。 3.wx.getMenuButtonBoundingClientRect()：获取菜单按钮（右上角胶囊按钮）的布局位置信...