获取微信小程序右上角胶囊的位置

最新推荐文章于 2024-06-20 14:48:20 发布
最新推荐文章于 2024-06-20 14:48:20 发布
阅读量3.3k 收藏 2
点赞数 1
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangyue2694/article/details/109198373
版权

获取微信小程序右上角胶囊的位置

微信中有一个api是用来获取胶囊的位置以及其他信息的，这个可以在我们使用自定义的标题的时候避开这个位置，或者自己写点什么东西 ，要和胶囊对齐的

api

wx.getMenuButtonBoundingClientRect()

返回回来的数据就是胶囊的位置信息
这个时候就可以操作了
这个有可能在onLoad() 获取不到数据，这里可以使用setTimeout延迟 也可以在onReady() 中使用

建议在onReady中使用

今天2岁
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发（七）获取位置信息
李维山的博客
10-08 1352
上一篇：微信小程序学习笔记（六） 【获取当前位置信息】wx.getLocation() getlocation.wxml： <view> <button bindtap="getlocation">获取位置</button> </view> getlocation.js： Page({ getlocation: function...
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
10-16
本文将深入探讨如何实现微信小程序胶囊按钮返回以及首页自定义导航栏的功能。 首先，我们要理解为什么要自定义导航栏。在微信小程序中，当用户从转发的商品页面进入时，由于页面栈只有一个，系统默认的返回按钮会...
[保姆级教程]uniapp小程序获取右上角胶囊位置信息
最新发布
肥晨开发的学习之路
06-20 1012
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。uniapp小程序获取右上角胶囊位置信息。配置中，为相应的页面设置。，这将隐藏默认的导航栏。
微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。
是江迪呀 的博客
03-03 7998
如果需要自定义顶部和底部导航。那么如何在自定义后能够适配不同的机型而不会出现样式问题呢？我们可以通过方法来获取页面的信息来保证样式的正确性。此方法常用于app.js文件中的onLanch()方法中，保证这些信息优先被加载，并把获取到的页面信息放到全局变量中，方便其他页面的获取使用。在此之前需要开启自定义顶部和底部导航栏。
获取微信小程序胶囊位置信息
yjdyyds的博客
07-22 735
获取微信小程序胶囊位置信息
微信小程序胶囊位置计算，避开胶囊位置
Qensq的博客
08-19 1645
由于小程序在不同的手机上顶部布局会发生变化，不能正确避开胶囊位置，所以通过官方给出的胶囊信息，可以计算出胶囊位置，并避开。例如：app.menu.top + app.menu.height + 10。此处思路是，获取胶囊底部位置，并拉开10个px。计算出来的值一定要用px，不要用rpx！计算出来的值一定要用px，不要用rpx！计算出来的值一定要用px，不要用rpx！需要拉开距离就在后面再 加自己需要的数值。在需要的页面的js中引用。，这样就可以全局使用了。
微信小程序设计 阿姨帮.zip
06-05
综上所述，设计和开发一个微信小程序如“阿姨帮”，需要对微信小程序的框架、数据管理、API调用、页面生命周期、事件处理、样式设计以及优化技巧等有深入理解。同时，还需要关注用户体验和数据安全，确保应用的稳定...
微信小程序----导航栏透明渐变一
12-20
在微信小程序开发中，创建富有视觉效果的用户界面是提升用户体验的关键之一。今天我们将探讨一个特定的设计技巧，即“微信小程序中的导航栏透明渐变效果”。这个效果可以通过CSS3的`opacity`属性来实现，让导航栏在...
uni开发微信小程序解决全局分享分销问题
01-03
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实现 1.技术点： vueX ...
微信小程序自定义导航栏实例代码
10-17
具体操作是在window项中加入"navigationStyle":"custom"配置，这样微信小程序就会放开对导航栏的控制，只保留右上角胶囊式菜单，页面内容将从视窗顶部开始渲染。 获取了导航栏控制权之后，接下来要梳理导航栏的功能...
header-navbar-小程序自定义导航栏，左上角胶囊按钮返回|首页详解.zip
09-23
小程序自定义导航栏，左上角胶囊按钮返回|首页详解详情介绍地址：https://juejin.im/post/5d0219536fb9a07ef06f8eab主要API获取设备信息wx.getSystemInfo获得胶囊按钮坐标信息wx.getMenuButtonBoundingClientRect项目截图
taro开发微信小程序的实践
10-16
《Taro开发微信小程序实践详解》 Taro是一款开源的多端开发框架，它使得开发者可以使用React的开发方式编写一次代码，就能实现微信小程序、H5、React Native等多端的应用。本文将深入探讨使用Taro开发微信小程序的...
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...
微信小程序自定义顶部组件customHeader的示例代码
11-20
2. **获取右上角胶囊按钮的位置信息**：胶囊按钮（通常包含“返回”和“更多”图标）的位置信息可以通过`wx.getMenuButtonBoundingClientRect()`方法获取。这个信息包括胶囊的宽度、高度、顶部和左侧距离，这对于...
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
03-29
获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式...
发一篇博客 获取微信小程序胶囊位置
sdgjah2的博客
01-17 432
【代码】发一篇博客 获取微信小程序胶囊位置。
微信小程序 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。
是江迪呀 的博客
08-09 2096
theme: smartblue highlight: a11y-dark 一、前言 我们在进行微信小程序开发时，常常需要自定义一些东西，比如自定义顶部导航、自定义底部导航等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型，来给大家介绍下微信小程序如何获取自定义内容的位置信息。 二、开启自定义 如果需要自定义顶部和底...
uniapp开发微信小程序获取胶囊位置，自定义title
LY1879276369的博客
04-26 273
【代码】uniapp开发微信小程序获取胶囊位置，自定义title。
微信小程序获取胶囊位置
06-04
微信小程序的胶囊位置指的是小程序页面顶部的导航栏，包括返回按钮、标题和菜单按钮。获取胶囊位置可以使用 `wx.getMenuButtonBoundingClientRect()` 接口。 使用示例： ```javascript const rect = wx....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值