uniapp中获取正确的导航栏的宽度

原创 已于 2022-03-03 15:19:21 修改 · 443 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #微信小程序

于 2021-12-10 14:40:28 首次发布
在uniapp开发中，为确保兼容性，通过条件编译解决h5、app-plus、ali-pay不同平台的差异。针对微信小程序，利用胶囊按钮的left值可获取导航栏宽度。本文介绍了如何在uniapp中正确获取微信小程序导航栏的宽度，涉及API调用和兼容性处理。

uniapp中获取正确的导航栏的宽度

1 代码自己实现，需要调用胶囊的位置的API

2 考虑到兼容性的原因，需要使用到条件编译。
h5 app-plus ali-pay 不支持的

3 最后的结论：在微信小程序中，导航栏的宽度就是胶囊位置的left值。

在这里插入图片描述

uni-app实现自定义导航栏，兼容H5、App、微信小程序
为技术而生
03-12 1万+
uni-app实现自定义导航栏，兼容H5、App、微信小程序 很多情况下，系统自带的导航栏无法满足UI设计的要求，这时候就需要我们自定义导航栏来实现需求，要考虑跨端的多种情况，这里我们封装成一个组件来使用...
uniapp-009-重点-自定义导航栏适配小程序各种技巧
浪漫韫秋
02-15 838
我们之前的代码，自定义导航栏，是H5的，是没有考虑状态栏的。所以，在微信小程序当中，这是不行的，这是显示异常的，这是如上图所示的。不同机型的状态栏，高度那是不一样的，对吧。上面的机型，状态栏的高度，statusBarHeight，这是多少，是20。你再看下面：上面的机型，状态栏的高度，statusBarHeight，这是多少，是47。所以，不同机型的状态栏的高度，那是不一样的。所以，我们要动态获取状态栏的高度，来设置一个状态栏的占位元素。导航栏的高度，我们根据什么动态计算呢？我们根据微信小程序的胶囊。我们使
uniapp微信小程序获取屏幕宽高
m0_55258023的博客
09-13 1万+
uniapp微信小程序获取屏幕宽高
UniApp 自定义导航栏适配指南：微信小程序胶囊遮挡、H5 与 App 全端通用方案
最新发布
有来技术
10-06 1677
本文介绍了一套UniApp项目中三端通用的自定义导航栏适配方案。针对微信小程序的胶囊按钮遮挡问题，通过getSystemInfoSync()和getMenuButtonBoundingClientRect()动态计算导航栏高度和搜索框宽度；H5和App端则采用固定高度。核心实现包括： 配置navigationStyle: custom 模板中使用占位符避免遮挡 条件编译处理不同平台差异 固定定位导航栏并适配主题 方案已通过微信小程序、H5和App端验证，解决了像素级适配问题，并提供常见问题解答和完整源码参考
uni-app 微信小程序自定义导航栏
weixin_40466351的博客
08-02 2891
上面的导航栏主要由状态栏（就是手机电量显示栏）和小程序的导航栏组成，android手机一般为48px，ios手机一般为44px。1、设置navigationStyle:custom。3、获取statusBarHeight高度。4、获取navTitleHeight的高度。2、页面导航栏div。
uniapp 自定义顶部导航栏所需的参数
磨磨叽叽季
04-12 665
在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。坐标信息以屏幕左上角为原点。
uniap在app中获取导航栏高度和状态栏的高度
Yzfeng21的博客
09-18 3373
第二种获取状态栏的高度。获取手机的导航栏高度。第一种获取状态栏的高度。第三种获取状态栏的高度。
uniapp中获取导航栏和状态栏高度的完整解决方案
在UniApp开发过程中，获取导航栏高度和状态栏高度是实现页面布局适配的关键步骤之一。尤其是在多端（H5、小程序、App）运行的项目中，不同平台（iOS与Android）对导航栏和状态栏的处理机制存在显著差异，这直接影响...
uniapp获取原生导航栏高度
12-10
2. **获取导航栏高度**：通过系统信息中的`statusBarHeight`和`navigationBarHeight`属性，可以获取导航栏的高度。 以下是一个示例代码，展示了如何在uniapp中获取原生导航栏高度： ```javascript uni....
uniapp小程序自定义导航栏高度适配方案
在UniApp开发小程序的过程中，自定义导航栏是一个非常常见且重要的需求，尤其当开发者希望实现更加个性化、品牌化或统一视觉风格的界面设计时。本文所提到的“uniapp小程序自定义导航栏[可运行源码]”正是围绕这一...
uniapp多端自定义导航栏实现方案与组件代码
在UniApp开发中，自定义导航栏是一项非常关键且实用的技术点，尤其在多端（H5、微信小程序、APP等）统一开发场景下显得尤为重要。本文围绕“uniapp自定义导航栏[项目代码]”这一主题，深入剖析了如何实现跨平台一致...
在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App
Lulu_yo的博客
10-07 7822
【代码】在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App。
uniapp写小程序顶部胶囊部分计算，布局顶部页面更美观
weixin_69666355的博客
03-27 1825
在开发uniapp小程序时，有默认的导航栏，但有时候的需求是不需要顶部的导航部分，比如：我的这个页面顶部就是个搜索框，还有就是安卓和ios默认的导航栏样式是不一样的，ios（默认导航文字在中间），安卓（默认导航文字在左边），所以为了样式的统一都是自己写顶部导航的样式，所以我们就要用到微信提供的获取各个机型胶囊栏距离顶部的距离 wx.getMenuButtonBoundingClientRect()2.顶部搜索的样式html 设置padding-top值 变量titleHeight。
uniapp获取小程序右上角胶囊按钮布局信息
wilL-my的博客
03-10 3509
let menuButtonInfo = uni.getMenuButtonBoundingClientRect() uniapp文档
记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题
林恒的博客
12-08 2821
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。 一、创建NavbarWr...
【uniapp小程序】配置tabbar底部导航栏
热门推荐
qq_49002903的博客
08-18 9万+
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。.........
uni-app配置底部导航栏
m0_74265396的博客
01-03 1281
直接在page.json中进行配置，四个参数均需要配置，所需要的图片必须。
【uni-app】创建底部或者顶部导航栏
Qxn530的博客
09-13 9991
创建底部导航栏、自定义顶部导航栏组件
uniapp设置导航栏、沉浸式导航栏以及获取屏幕尺寸
EvaY_Yang的博客
07-01 5707
页面上往往会有一些需要随着屏幕的大小变化而变化的样式，这时，我们就需要获取到屏幕的宽度和高度，获取屏幕的尺寸可以通过uni.getSystemInfo来获取。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值