微信小程序自定义导航栏

原创

已于 2025-04-09 16:27:09 修改 · 1.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #自定义导航栏后设置导航文字适配

于 2023-05-25 10:06:39 首次发布

文章讲述了在微信小程序中实现图片置顶功能，需要自定义导航栏样式，由此引发的标题适配问题。作者提供了通过API获取胶囊按钮和状态栏高度的方法，动态计算导航栏整体高度并适配不同手机型号。此外，还提到了对于需要恢复默认导航栏样式的处理方式。

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

文章目录

2023/6/1 补充（2024/1/4 改）
- 注意：
- 注意
过时
2023/5/30 补充：

最近菜鸟做微信小程序，然后有一个图片置顶的功能
在这里插入图片描述

这个功能就需要把微信自带的导航栏样式给去掉，使用自定义导航栏样式，但是这个又产生一个问题，导航栏标题文字就不是很好适配了，因为不同手机型号，距离最上面的距离是不同的！

去掉导航栏的代码：

app.json

"window": {
   
   
  "navigationStyle": "custom"
},

2023/6/1 补充（2024/1/4 改）

菜鸟突然发现，之前写的已经成为历史了，现在微信小程序可以通过 api 直接获取到这些高度，所以菜鸟在这里进行更新！

app.js的onLaunch加入下方代码：

// 获取胶囊的详细信息
let menuButtonObject = wx.getMenuButtonBoundingClientRect(); 
wx.getSystemInfo({
   
   
  success: res => {
   
   
    // 导航高度
    let statusBarHeight = res.statusBarHeight,
      // 胶囊距离顶部高度
      navTop = menuButtonObject.top,
      // 胶囊按钮与右侧的距离 = windowWidth - right + 胶囊宽度(包括右边距离)
      navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width,
      // 导航栏整体高度
      navHeight = statusBarHeight + menuButtonObject.height + (navTop - statusBarHeight) * 2;
    this.globalData.navHeight = navHeight;
    this.globalData.navTop = navTop;
    this