Vuetify 底部导航切割内容答案

【问题标题】：Vuetify bottom nav cutting contentVuetify 底部导航切割内容
【发布时间】：2019-05-07 09:31:02
【问题描述】：

我的底部导航正在切割我体内的内容，如果固定，我已经尝试放置，但它只是向下移动到底部

这就是现在的样子：

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

这就是代码的样子：

【问题讨论】：

我认为您应该添加app 属性？ <v-bottom-nav app>

标签： javascript web vue.js progressive-web-apps vuetify.js

【解决方案1】：

自发布 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>

底部导航.vue：

<template>
  <v-container>
  <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>
  </v-container>
</template>

【讨论】：

【解决方案2】：

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

【讨论】：