uniapp自定义modal弹窗如何避免覆盖标题栏和tabbar

在uni-app中，使用position: fixed和z-index设置弹窗，但需调整定位避免覆盖。

• 设置top: var(--status-bar-height)避开状态栏。
• 计算内容区域高度，确保弹窗在安全区内。
• 使用uni.getSystemInfoSync()获取tabBar高度，动态调整弹窗底部位置。
• 或使用uni.createSelectorQuery()获取标题栏和tabBar高度，动态设置弹窗位置。

在 UniApp 中，自定义 modal 弹窗时，为避免覆盖标题栏和 TabBar，需确保弹窗内容位于安全区域内。以下是解决方案：

1. 使用 CSS 样式控制位置

通过设置 position: fixed 和 z-index，并利用 top 和 bottom 属性避开标题栏和 TabBar 区域。

示例代码：

<template>
  <view class="custom-modal" v-if="showModal">
    <view class="modal-content">
      <!-- 弹窗内容 -->
      <text>这是一个自定义弹窗</text>
      <button @click="closeModal">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    closeModal() {
      this.showModal = false;
    }
  }
};
</script>

<style>
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  /* 避开标题栏和 TabBar */
  margin-top: 80px; /* 根据标题栏高度调整 */
  margin-bottom: 100px; /* 根据 TabBar 高度调整 */
}
</style>

2. 动态计算安全区域

使用 uni.getSystemInfoSync() 获取状态栏和 TabBar 高度，动态设置弹窗边距。

优化代码：

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      tabBarHeight: 50 // 默认值，需根据实际调整
    };
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight + 44; // 状态栏 + 标题栏高度
    // 若 TabBar 高度不确定，可通过布局计算或预设值调整
  }
};
</script>

<style>
.modal-content {
  /* 动态边距示例 */
  margin-top: calc(80px + env(safe-area-inset-top)); /* 兼容刘海屏 */
  margin-bottom: calc(100px + env(safe-area-inset-bottom));
}
</style>

3. 使用 uni-app 原生组件

若需求简单，可直接使用 uni.showModal，其自动适配安全区域。

注意事项：

• 标题栏高度：通常为 状态栏高度 + 44px（导航栏高度）。
• TabBar 高度：默认约 50px，需根据设计调整。
• 安全区域：全面屏设备需使用 env(safe-area-inset-*) 避免刘海或圆角遮挡。

通过以上方法，可确保弹窗在安全区域内显示，不遮挡关键UI元素。