微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑

最新推荐文章于 2025-01-11 12:06:01 发布

浩冉学编程

最新推荐文章于 2025-01-11 12:06:01 发布

阅读量4.5k

点赞数 15

文章标签：微信小程序 notepad++ 小程序前端 javascript

本文链接：https://blog.csdn.net/weixin_57177381/article/details/136486688

版权

文章介绍了如何在手机应用中实现自定义顶部导航栏，包括计算状态栏高度、胶囊位置（用于调整搜索图标位置），并处理了单位转换和胶囊位置异常的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：不用官方默认的导航栏，想用自己自定义的

实现效果：

关键词：顶部状态栏、顶部导航栏、顶部状态导航栏、胶囊

原理：

自定义导航栏无非就是求得导航栏高度，并让内容容器垂直方向居中于导航栏高度

1.获取手机系统状态栏高度

2.获取胶囊位置（包括高度）

3.求得导航栏高度（导航栏高度实际上就是胶囊高度+高度差*2）

高度差 = 胶囊位置到屏幕顶部距离（menu.top,menu为胶囊位置对象）-状态栏高度（直接获取res.statusBarHeight）

（所有单位长度默认px）


     // 获取手机系统信息
     wx.getSystemInfo({
      success: res => {
     
        // 手机系统状态栏高度
        wx.setStorageSync('statusBarHeight', res.statusBarHeight)

        const platform = res.platform
        const menu =  wx.getMenuButtonB