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

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

取消原生头部

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