微信小程序自定义导航栏高度适配

最新推荐文章于 2024-03-05 19:29:42 发布
最新推荐文章于 2024-03-05 19:29:42 发布
阅读量994 收藏
点赞数
文章标签： 微信小程序 小程序 uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JandyPam/article/details/131657235
版权
本文介绍了微信小程序中两种获取状态栏高度的方法：wx.getSystemInfoSync().statusBarHeight和wx.getMenuButtonBoundingClientRect()，并强调后者能获取到胶囊按钮的布局位置。在uni-app开发中，作者通过内联样式实现导航栏高度与胶囊按钮对齐，建议开发者依据项目实际需求调整。
摘要由CSDN通过智能技术生成

参考文章：链接

方式1、 wx.getSystemInfoSync().statusBarHeight

在这里插入图片描述
wx.getSystemInfoSync().statusBarHeight获取的是状态栏的高度，并不是跟右上角的胶囊按钮对齐。

方式2、 wx.getMenuButtonBoundingClientRect()

用 wx.getMenuButtonBoundingClientRect() 官方API可以获取菜单按钮胶囊按钮的布局位置信息。
在这里插入图片描述

style绑定内联样式

<template>
	<div class=&#
最低0.47元/天 解锁文章
JandyPam
关注
微信小程序自定义导航栏组件,导航,完美适配全部手机
01-27
小程序自定义导航栏适配 完美解决内容上下不居中 左右不居中 高度不合适的问题 Navigation Navigation 是小程序的顶部导航组件，当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏 使用...
【微信小程序】计算状态栏（statusBar）、导航栏（navBar）、底部安全区域高度，并设置自定义导航栏内容垂直居中
最新发布
qq_40167860的博客
08-30 791
本文介绍了在微信小程序中，当navigationStyle设置为custom时，如何计算页面状态栏、导航栏及内容区域的高度。
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配
aaa123aaasqw的博客
02-27 2832
导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2。观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2。
微信小程序如何自定义导航栏，怎么确定导航栏及状态栏的高度？导航栏被刘海、信号图标给覆盖了怎么办？
苦夏木禾
01-09 2884
微信小程序如何自定义导航栏，怎么确定导航栏及状态栏的高度？导航栏被刘海、信号图标给覆盖了怎么办？
关于微信小程序自定义导航栏时，如何获取手机状态栏和导航栏高度
热门推荐
thirteen_king13的博客
08-15 1万+
在微信小程序中，自定义导航栏时，如和获取状态栏和导航栏的高度
微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑
浩冉学编程的博客
03-05 3078
微信小程序如何实现自定义导航栏以及踩过的坑，获取胶囊位置计算导航栏位置，让图标始终保持靠着胶囊左边
微信小程序自定义导航栏实例代码
12-01
在微信小程序开发中，为了实现更灵活的导航栏设计，我们常常需要自定义导航栏，以便解决默认导航栏带来的各种问题。例如，Android和iOS设备上页面标题的展示不一致，标题样式控制有限，以及左上角事件监听与定制的...
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...
微信小程序底部tab-bar组件，高度还原微信原生tabBar功能及样式，且兼容iPhone异形全面屏
07-24
微信小程序底部tab-bar组件，高度还原微信原生tabBar功能及样式，且兼容iPhone异形全面屏，主要用于解决微信官方tabBar在遮罩层下无法被遮住的问题
[微信小程序] 自定义顶部导航栏(navigationBar)，兼容适配所有机型（完整实例）
05-25
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（完整案例），本示例主要讲述如何隐藏掉小程序顶部导航栏，然后设置自定义navigationBar，其中涉及组件用法、参数传递、导航栏相关等，简单点来说就是将...
小程序自定义导航栏高度
IT_iosers的博客
03-30 1476
了解导航栏高度的计算方式 我们先要知道导航栏高度是怎么组成的， 计算公式： 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度 。 获取导航栏高度 用wx.getSystemInfoSync() 获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 const systemInfo = wx.getSystemInfoSync(); 获取胶囊按钮的布局位置信息 我们用wx.getMenuBut
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
分享互联网的有趣知识~
11-09 8893
微信小程序自定义导航栏机型适配--底部Tabbar--view高度
获取不同机型微信小程序状态栏+导航栏高度
铁锤妹妹的博客
10-09 8790
很多时候我们开发微信小程序，都需要先知道状态栏和导航栏的高度，才能去做其他功能。
微信小程序全面屏适配（获取导航栏和状态栏高度）
奋斗吧灬青年的博客
10-21 3182
let systemInfo = wx.getSystemInfoSync(); //状态栏高度 let statusBarHeight = Number(systemInfo.statusBarHeight); let menu = wx.getMenuButtonBoundingClientRect() //导航栏高度 let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2 //状态栏加导航栏高度 let navSta.
uniapp微信小程序计算状态栏和导航栏高度
weixin_68530407的博客
08-17 544
记录一下开发过程中吸顶涉及用到的一个计算。
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
qq_52766402的博客
12-09 538
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
微信小程序自定义导航栏实现全攻略
本文主要介绍了如何在微信小程序中自定义导航栏，并实现兼容适配所有机型的方法。通过隐藏默认导航栏，获取系统信息和胶囊按钮的相关数据，计算导航栏高度，编写新的导航栏样式，以及在页面中引用自定义导航栏。 在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值