在uniapp中获取微信小程序状态栏和导航栏的高度

在微信小程序中，可以使用 uni.getSystemInfo() 方法获取设备的系统信息，包括状态栏的高度和顶部导航栏的高度。您可以使用这些信息计算顶部图标距离。

下面是一个示例代码，展示如何在 UniApp 中获取顶部图标距离：

getTopIconDistance() {
  uni.getSystemInfo({
    success: (res) => {
      // 获取手机顶部状态栏的高度
      const statusBarHeight = res.statusBarHeight || 0;

      // 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;

      // 计算顶部图标距离
      const topIconDistance = statusBarHeight + navBarHeight;

      // 打印顶部图标距离
      console.log('顶部图标距离:', topIconDistance);
    },
    fail: (err) => {
      console.error('获取系统信息失败:', err);
    },
  });
}

在上述示例代码中，我们通过调用 uni.getSystemInfo() 方法获取系统信息。然后，我们从系统信息中提取状态栏的高度和导航栏的高度。最后，我们通过计算状态栏高度和导航栏高度的总和，得到顶部图标距离。

请注意，由于不同设备和系统的差异，具体的计算方法可能会有所变化。因此，在实际开发中，您可能需要根据具体情况进行微调或使用其他方法来获取准确的顶部图标距离。