uniapp 自定义tab遮住主题页面如何解决？

在uniapp中自定义tabbar时，发现tabbar会遮挡页面底部内容。尝试调整页面高度和定位属性，但页面主体内容依然被遮盖。请问如何正确设置才能使页面内容不被tabbar遮挡？需要具体解决方案或示例代码。

nodeper 1楼

在pages.json中调整tabBar的list数组，确保页面路径正确。检查页面结构，避免fixed定位冲突。使用uni.onTabBarMidButtonTap监听中间按钮事件。

wuwangju 2楼

在 UniApp 中，自定义 TabBar 可能会遮挡页面内容，通常是由于布局结构或样式问题导致的。以下是常见解决方案：

1. 调整页面布局结构

确保页面内容区域使用 flex 布局，并为 TabBar 预留底部空间。

<template>
  <view class="page-container">
    <!-- 页面内容 -->
    <view class="content" :style="{ paddingBottom: tabBarHeight + 'px' }">
      <!-- 你的页面内容 -->
    </view>
    <!-- 自定义 TabBar -->
    <view class="custom-tabbar" :style="{ height: tabBarHeight + 'px' }">
      <!-- TabBar 内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarHeight: 50 // 根据实际 TabBar 高度调整
    }
  }
}
</script>

<style>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;
  overflow-y: auto;
}
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
}
</style>

2. 使用 CSS 固定定位

为 TabBar 设置 fixed 定位，并确保页面内容有对应的底部内边距。

.content {
  padding-bottom: 50px; /* 与 TabBar 高度一致 */
}
.custom-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
}

3. 动态获取 TabBar 高度

通过 uni.getSystemInfoSync() 获取底部安全区域高度（针对全面屏设备）。

export default {
  data() {
    return {
      tabBarHeight: 50
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    // 全面屏设备需加上底部安全区域
    this.tabBarHeight = 50 + (systemInfo.safeAreaInsets?.bottom || 0);
  }
}

4. 使用 `page-meta` 组件（H5 端）

在 H5 环境中，可以通过 page-meta 动态设置页面底部距离。

<page-meta :root-font-size="rootFontSize" :bottom="tabBarHeight + 'px'"></page-meta>

注意事项：

确保 custom-tabbar 的 z-index 高于页面内容（如设置 z-index: 999）。
在 onLoad 或 onReady 中计算高度，避免页面渲染时布局错位。
测试不同设备和屏幕尺寸，确保兼容性。