顶部导航的一些知识

状态栏高度

不包含胶囊区域，仅截图 pink 位置高度 , systemInfo.statusBarHeight + 'px'

const systemInfo = uni.getSystemInfoSync();
this.systemInfo = systemInfo;
// systemInfo.statusBarHeight

状态栏高度 + 状态栏与胶囊之间的高度

使用 uni.getMenuButtonBoundingClientRect() api 中的 top,获取， menuButtonInfo.top

const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;

// menuButtonInfo.top

状态栏与胶囊之间的距离高度

使用上面中 menuButtonInfo.top 到胶囊顶部的距离 减去 systemInfo.statusBarHeight 状态栏的高度，即可得出之间的距离高度

const systemInfo = uni.getSystemInfoSync();
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.systemInfo = systemInfo;
this.menuButtonInfo = menuButtonInfo;

// `menuButtonInfo.top - systemInfo.statusBarHeight

胶囊高度

使用上面中 menuButtonInfo.height 可以得到胶囊的高度

const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;

// menuButtonInfo.height

胶囊左侧/本身/右侧宽度

左侧

使用 uni.getMenuButtonBoundingClientRect() api 中的 left,获取， menuButtonInfo.left

const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;

// menuButtonInfo.left

本身

使用 uni.getMenuButtonBoundingClientRect() api 中的 width,获取， menuButtonInfo.width

const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;

// menuButtonInfo.width

右侧

使用 uni.getMenuButtonBoundingClientRect() api 中的 right,获取右侧的 x 轴坐标

然后通过 systemInfo.windowWidth 获取屏幕宽度减去 menuButtonInfo.right(也就是屏幕总宽度-胶囊左侧宽度-胶囊本身宽度) 就得到了右侧的宽度

const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;

// systemInfo.windowWidth - menuButtonInfo.right

顶部到胶囊底部

使用 uni.getMenuButtonBoundingClientRect() api 中的 bottom,获取， menuButtonInfo.bottom

const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.menuButtonInfo = menuButtonInfo;

// menuButtonInfo.bottom

自定义导航全部高度

方法一

使用 uni.getSystemInfoSync.statusBarHeight 获得状态栏高度

使用 (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height 获取胶囊及上下边距高度

const systemInfo = uni.getSystemInfoSync(); 
const statusBarHeight = systemInfo.statusBarHeight; // 状态栏
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 标题栏高度 = 胶囊按钮的高度 + 上下间距
const titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
// 总导航栏高度
const navHeight = statusBarHeight + titleBarHeight;
console.log("状态栏:", statusBarHeight);
console.log("标题栏:", titleBarHeight);
console.log("总高度:", navHeight);

方法二

首先获胶囊上边距的值(menuButtonInfo.top) 减去 状态栏的高度(systemInfo.statusBarHeight) 得出间距

然后通过胶囊下坐标加上得出的间距 (enuButtonTop - statusBarHeight + menuButtonBottom)

const systemInfo = uni.getSystemInfoSync();
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const statusBarHeight = systemInfo.statusBarHeight; // 状态栏
const menuButtonTop = menuButtonInfo.top; // 胶囊按钮的上边界坐标
const menuButtonBottom = menuButtonInfo.bottom; // 胶囊按钮的下边界坐标
const navHeight = menuButtonTop - statusBarHeight + menuButtonBottom; // 导航栏的高度
this.navHeight = navHeight;