完美微信小程序自定义导航栏

qwas — Sun, 27 Nov 2022 11:50:52 GMT

最近做了一个微信小程序，UI 设计出来一个界面，需要在首页将背景图全屏展示，一直以为顶部菜单是固定的，只能使用黑色或白色样式，当设计提出时，我还信誓旦旦的说，微信小程序功能不支持。。。

后来搜索了一下，这个东西叫自定义顶部导航栏，是我把文档看漏了

准备工作

在 index.json 下面内容

"navigationStyle": "custom",

这是隐藏后的效果，右边那个叫胶囊的按钮，是隐藏不了的。

高度分为状态栏，胶囊的高度，以及胶囊上下的间隙

通过 wx.getSystemInfo({}) 方法可以获取状态栏高度

wx.getSystemInfo({  // 这个是同步方法
  success(res) {
    statusBarHeight = res.statusBarHeight
    console.log('状态栏的高度', statusBarHeight)
  }
})

wx.getMenuButtonBoundingClientRect() 方法可以获取胶囊的高度，位置，即胶囊按钮距离顶部的距离

const rect = wx.getMenuButtonBoundingClientRect()
const { top, height, width } = rect
console.log('胶囊按钮距离顶部的距离', top)
console.log('胶囊按钮自身高度', height)

导航栏的高度 = 状态栏的高度 + 胶囊按钮与状态栏的上间距及下间距 + 胶囊按钮自身高度

const padding = (statusBarHeight + (top - statusBarHeight) * 2 + height)

this.setData({
  padding: padding
})

iPhone

iPad

Android

Have Fun ~