uniapp自定义底部tabbar遮住页面

如果自定义的底部TabBar遮住了页面内容，可以尝试以下解决方法：

1. 在`App.vue`的`<view class="app">`标签中添加一个底部留白的区域，以避免内容被底部TabBar遮挡。

<template>
  <view class="app">
    <router-view></router-view>
    <view class="tabbar-placeholder"></view>
    <uni-tab-bar>
      <!-- TabBar的内容 -->
    </uni-tab-bar>
  </view>
</template>

<style>
.tabbar-placeholder {
  height: 50px; /* 底部TabBar的高度 */
}
</style>

通过添加一个高度和底部TabBar相同的留白区域，可以保证页面内容不被底部TabBar遮挡。

2. 调整页面内容的样式，避免与底部TabBar重叠。

可以通过设置页面内容的`margin-bottom`属性，给内容留出一定的空间，避免与底部TabBar重叠。

<style>
.page-content {
  margin-bottom: 50px; /* 底部TabBar的高度 */
}
</style>

在页面的样式中，为内容容器添加一个`margin-bottom`属性，值为底部TabBar的高度，以确保内容不被TabBar遮挡。

3. 使用`position: fixed`固定底部TabBar的位置。

如果以上方法无效，可以尝试使用CSS的`position: fixed`将底部TabBar固定在页面底部，以确保内容不被遮挡。

<style>
.uni-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>

将底部TabBar的样式中添加`position: fixed`，并设置`bottom: 0`，`left: 0`，`width: 100%`等属性来固定在页面底部。

通过以上方法，你可以解决底部TabBar遮住页面内容的问题。根据具体情况选择适合的方法即可。希望对你有所帮助！