微信小程序获取topbar高度

开发背景：在有topbar的情况下，又需要那种透明的topbar效果。

思路：用ts计算topbar高度，用绝对定位提上去

<view class="test" style="top: {{-navBarHeight}}px;"></view>

/* 测试用例 */
.test {
  position: relative;
  width: 100%;
  height: 300rpx;
  background-color: skyblue;
}

  /**
   * 计算导航栏高度
   */
  getNavBarHeitht() {
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 假设导航栏高度为状态栏高度 + 胶囊按钮高度 + 间距（通常为8）
    const statusBarHeight = systemInfo.statusBarHeight;
    const menuButton = wx.getMenuButtonBoundingClientRect();
    const navBarHeight = statusBarHeight + menuButton.height + (menuButton.top - statusBarHeight) * 2;
    console.log(navBarHeight)
    this.setData({
      navBarHeight
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getNavBarHeitht()
  },