小程序-自定义导航栏适配高度问题

已于 2023-09-18 21:35:29 修改
阅读量99 收藏 1
点赞数 1
文章标签： 小程序
于 2023-09-18 19:20:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58172543/article/details/132993231
版权

1.获取设备信息

await uni.getSystemInfo();

2.获取手机状态栏的高度

systemInfo.statusBarHeight

3.获取小程序胶囊信息

uni.getMenuButtonBoundingClientRect()

4.根据手机状态栏的高度与小程序胶囊信息对自定义导航栏告诉进行动态设置

幽丶冥
关注
微信小程序自定义导航栏高度适配
JandyPam的博客
07-11 982
小程序自定义导航栏，兼容适配所有机型
小程序实现自定义导航栏适配完美版
10-17
主要介绍了小程序实现自定义导航栏适配完美版，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
小程序自定义导航栏高度
IT_iosers的博客
03-30 1465
了解导航栏高度的计算方式 我们先要知道导航栏高度是怎么组成的， 计算公式： 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度 。 获取导航栏高度 用wx.getSystemInfoSync() 获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 const systemInfo = wx.getSystemInfoSync(); 获取胶囊按钮的布局位置信息 我们用wx.getMenuBut
微信小程序 - 自定义头部导航栏开发
最新发布
觉醒法师的专栏
07-30 2975
默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配
aaa123aaasqw的博客
02-27 2685
导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2。观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2。
微信小程序如何自定义导航栏，怎么确定导航栏及状态栏的高度？导航栏被刘海、信号图标给覆盖了怎么办？
苦夏木禾
01-09 2869
微信小程序如何自定义导航栏，怎么确定导航栏及状态栏的高度？导航栏被刘海、信号图标给覆盖了怎么办？
小程序自定义导航栏高度计算
今天bug有点多
06-19 368
【代码】小程序自定义导航栏高度计算。
小程序自定义导航栏兼容适配所有机型（附完整案例）
10-15
【小程序自定义导航栏兼容适配所有机型】在开发微信小程序时，官方提供了一套标准的导航栏配置，但有时我们需要实现更个性化的导航栏功能，例如集成搜索框、自定义背景图或添加返回首页按钮等。这时就需要自定义导航...
小程序自定义导航栏，兼容适配所有机型（附完整案例）
03-29
根据不同机型计算导航栏高度 编写新的导航栏 页面引用自定义导航 正文 隐藏官方导航栏 隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。 (此图片来源于网络，如有侵权，请联系删除! ) 全局隐藏 //...
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
本文将详细介绍如何实现微信小程序自定义顶部导航栏，并确保其在所有机型上的适配。首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户...
微信小程序自定义导航栏的自适应高度计算
OnTime的博客
06-18 814
微信小程序自定义导航栏自适应高度计算
小程序解决高度适配问题
akko
08-22 628
顶部距离 这里算的结构跟上面的好像不太一样，我也不知道是怎么回事 蒙混过关 ค(TㅅT)ค 底部距离 84 - 50 = 34 and 896 - 862 = 34 成立 这个高度是取自 这里 let sys = wx.getSystemInfoSync() console.log(sys) safeArea 这个属性好像是手机的 安全区域 ，在iphone上见的多 (๑òᆺó๑) ...
微信小程序开发中自定义自适应头部导航栏
Jifei5201314的博客
03-16 855
1.在app.js文件中获取一些数据 //app.js App({ onLaunch: function () { const that = this; // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏到胶囊的间距（胶
小程序顶部导航栏的自定义
weixin_33796177的博客
06-26 382
https://www.zhihu.com/question/272154534
小程序轮播图高度适配
qq_53501707的博客
11-23 372
小程序轮播图
微信小程序高度定制导航栏提升项目操作性
manixchenyang的博客
03-29 892
原生微信小程序高度定制导航栏，高度实现UI效果
【微信小程序scroll-view高度自适应】
qq_31629679的博客
06-25 4252
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
微信小程序自定义导航栏，自适应手机屏幕高度（计算微信小程序默认胶囊高度）
qq_43732387的博客
07-02 6959
微信小程序自定义导航栏，自适应手机屏幕高度（计算微信小程序默认胶囊高度）
微信小程序自定义导航栏适配指南
weixin_34397291的博客
09-17 1225
前言 使用自定义导航，产品可以对导航栏进行深度定制，对与场景比较复杂的小程序来说，可以明显的提高用户体验。但是相应的，微信小程序的自定义导航栏并不完美，入坑需谨慎。。。 开启自定义导航栏 全局配置 app.json 设置 window.navigationStyle: 'custom' 自定义导航栏高度计算 通过 wx.getSystemInfo 获取设备信息，screenHeight - wi...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值