可视化底部导航切割内容

Question

我的底部导航正在削减我体内的内容，我尝试将其固定，但是它会一直下降到底部

这是现在的样子：

这是我的代码，我无法将代码添加到该问题，因为它不会显示u，但这是我的底部导航代码

这是代码的外观：

Answer 1

如Traxo所述，将您的内容包装到<v-content></v-content>元素中，并向app添加<v-bottom-nav>属性。
工作示例：https://codepen.io/anon/pen/YRoexV

Answer 2

自发布 v2.3.0 https://github.com/vuetifyjs/vuetify/releases/tag/v2.3.0

v-content 现在是 v-main，因此构建它的新方法是这样的：

App.vue：

<template>
  <v-app>

    <AppBar/>

    <v-main>
      <router-view></router-view>
    </v-main>

    <BottomNavigation/>

  </v-app>
</template>

BottomNavigation.vue：

<template>
  <v-bottom-navigation
    fixed
    app
  >
    <v-btn>
      <span>Recents</span>
      <v-icon>mdi-history</v-icon>
    </v-btn>

    <v-btn>
      <span>Favorites</span>
      <v-icon>mdi-heart</v-icon>
    </v-btn>

    <v-btn>
      <span>Nearby</span>
      <v-icon>mdi-map-marker</v-icon>
    </v-btn>
  </v-bottom-navigation>
</template>