当前位置: 首页 > 工具软件 > TitleBar > 使用案例 >

微信小程序自定义titleBar高度计算

益清野
2023-12-01
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
          navmenuHeight = menuButtonObject.height, //胶囊的高度
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2,//计算导航栏高度
          containerHeight = res.windowHeight - navHeight,  //tabbar 内容区域高度
          contentHeight = res.screenHeight - navHeight  //子页面内容区域高度
        this.globalData.navHeight = navHeight;  //导航栏高度
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;  //窗口高度
        this.globalData.navmenuHeight = navmenuHeight;
        this.globalData.containerHeight = containerHeight; //tabbar页面内容区域高度
        this.globalData.contentHeight = contentHeight; // 子页面内容区域
      },
      fail(err) {
        console.log(err);
      }
    })
 类似资料: