uniapp做的H5页面，往上拉，底部导航栏处会有留白，请问这是什么问题，怎么解决

img

uniapp开发H5页面时遇见的这个问题，还望各位能帮忙解决

设置高度：100vh

最外层view设置：
height: calc(100vh - var(--window-bottom) - var(--window-top));

这个问题可能是由于页面高度问题引起的。当页面高度小于屏幕高度时，底部导航栏会被页面顶部容器占据的留白替代，导致底部导航栏和底部留白不对齐。

解决方法有两个：

1.在页面底部增加一个空的容器占位，使页面高度等于屏幕高度，从而保证底部导航栏和底部留白对齐。

2.通过CSS样式来设置底部导航栏的位置，使其固定在页面底部，保证底部导航栏始终在页面底部。

下面是两种解决方法的示例代码：

方法1：增加空的容器占位

<template>
  <div class="page-container">
    <div>页面内容</div>
    <!-- 添加一个空容器占位，高度等于底部导航栏高度 -->
    <div style="height: 50px;"></div>
  </div>
</template>

<style>
  .page-container {
    height: 100%; /* 设置容器高度为屏幕高度 */
    overflow: auto; /* 允许容器滚动 */
  }
</style>

方法2：通过CSS样式设置导航栏位置

<template>
  <div class="page-container">
    <div>页面内容</div>
  </div>
  <!-- 在底部增加一个固定位置的导航栏 -->
  <div class="bottom-nav">
    <div>底部导航栏</div>
  </div>
</template>

<style>
  .page-container {
    height: 100%; /* 设置容器高度为屏幕高度 */
    overflow: auto; /* 允许容器滚动 */
    margin-bottom: 50px; /* 给容器底部预留导航栏高度 */
  }
  
  .bottom-nav {
    position: fixed; /* 固定位置 */
    bottom: 0; /* 设置位置为底部 */
    height: 50px; /* 设置导航栏高度 */
    width: 100%; /* 设置导航栏宽度 */
    background-color: #fff; /* 设置导航栏背景颜色 */
    border-top: 1px solid #ccc; /* 设置导航栏上边框 */
  }
</style>

通过以上两种方法，你应该可以解决uniapp在H5页面上拉留白的问题。

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
这个问题出现的原因是底部导航栏被fixed定位在底部，往上拉出现了滚动，但是底部导航栏却没有随之上移，导致留白问题。解决方法分两种：

1.使用自定义导航栏

在底部导航栏下面加一个自定义导航栏，在滚动时一同上移，可以解决留白问题。代码如下：

<template>
  <div>
    <div class="custom-nav">这是自定义导航栏</div>
    <div class="content">这是页面主体内容</div>
    <div class="tabbar">这是底部导航栏</div>
  </div>
</template>

<style>
  .custom-nav {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    background-color: #ffffff;
    z-index: 100;
  }
  .content {
    padding-top: 50px;
    /* 由于自定义导航栏的高度是50px，所以需要将主体内容下移50px */
  }
  .tabbar {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    z-index: 100;
  }
</style>

2.使用插件解决

可以使用uni-app官方提供的uni-tab-bar插件，该插件支持国内外流行的底部导航栏样式，并且可以解决往上拉留白的问题。代码如下：

<template>
  <uni-tab-bar :tab-list="tabList" :current="current">
    <view class="content">这是页面主体内容</view>
  </uni-tab-bar>
</template>

<script>
  import uniTabBar from '@/components/uni-tab-bar/uni-tab-bar.vue'

  export default {
    components: {
      uniTabBar
    },
    data() {
      return {
        tabList: [{
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/tab-bar/home.png',
          selectedIconPath: '/static/tab-bar/home-active.png'
        }, {
          pagePath: '/pages/list/list',
          text: '列表',
          iconPath: '/static/tab-bar/list.png',
          selectedIconPath: '/static/tab-bar/list-active.png'
        }],
        current: 0
      }
    }
  }
</script>

<style>
  .content {
    padding-top: 50px;
    /* 由于uni-tab-bar插件自带底部导航栏，所以需要将主体内容下移50px */
  }
</style>
  1. 直接内容区域高度给成100%或100vh,让其自适应变化
    如果我的回答解决了您的问题，请采纳！

uniapp设置tabBar后，页面底部有留白。

可以借鉴下
https://blog.csdn.net/qq_25430563/article/details/106717674

页面高度的问题吧，我也遇到过，我这样设置就好用了

page{
        height: 100%;
        background-color: #00CCCC;
    }

img