微信小程序——自定义导航栏

最新推荐文章于 2025-05-26 11:23:29 发布

雪酒呀

最新推荐文章于 2025-05-26 11:23:29 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/Willow_Spring/article/details/121117889

微信小程序专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何取消原生导航头部并实现自定义导航栏。包括使用`navigationStyle`设置为`custom`取消默认头部，利用`wx.getMenuButtonBoundingClientRect()`获取胶囊按钮的位置信息，并结合`wx.getSystemInfo()`获取设备的具体参数，最终计算出自定义导航栏的高度、胶囊按钮与顶部的距离及与右侧的距离。

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

在一定情况下，我们需要用到自定义的导航，在此记录

取消原生头部

 "navigationStyle": "custom"

在这里插入图片描述

获取胶囊的信息

wx.getMenuButtonBoundingClientRect()

getMeunInfo() {
    let Menuinfo = wx.getMenuButtonBoundingClientRect()
    // @ts-ignore
    console.log("Menuinfo", Menuinfo);

    // 获取设备信息
    wx.getSystemInfo({
      success: res => {
        // @ts-ignore
        console.log(res)
        //自定义导航栏的高度
        let height = res.statusBarHeight + Menuinfo.height + ((Menuinfo.top - res.statusBarHeight) * 2)

        // @ts-ignore
        this.navHeight = height
        // @ts-ignore
        this.statusBarHeight = res.statusBarHeight
        this.setData({
          statusBarHeight: res.statusBarHeight,
          marginTop: Menuinfo.top + (Menuinfo.height / 4)
        })
      }
    })
    /**
     * 通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right。
     */
  },