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

最新推荐文章于 2025-09-30 00:54:46 发布

原创最新推荐文章于 2025-09-30 00:54:46 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序

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

32 篇文章

订阅专栏

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

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

取消原生头部

 "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。
     */
  },