Vuetify v-bottom-navigation 下推

Question

这是我的主要查看路线页面

<template>
  <div>
    <MobileMain v-if="$vuetify.breakpoint.xsOnly"/>
    <Navigation v-else/>
    <router-view></router-view>
  </div>
</template>

<script>
import Navigation from '../components/Utils/Navigation'
import MobileMain from '../components/Utils/MobileMain.vue'

export default {
  components: {
    Navigation,
    MobileMain
  }
}
</script>

这是在我的移动视图中

<template>
  <div>
    <template>
      <div>
        <v-app-bar color="deep-purple accent-4" dense dark>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

          <v-toolbar-title>Page title</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn href="/KPI" icon>
            <v-icon >mdi-heart</v-icon>
          </v-btn>

        </v-app-bar>
      </div>
    </template>
    <template>
      <div>
        <v-bottom-navigation
          absolute
          horizontal
          class="nav__menu"
        >
          <v-btn color="deep-purple accent-4" text>
            <span>Recents</span>

            <v-icon>mdi-history</v-icon>
          </v-btn>

          <v-btn color="deep-purple accent-4" text>
            <span>Favorites</span>

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

          <v-btn color="deep-purple accent-4" text>
            <span>Nearby</span>

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

我正在进行一个可以在移动设备和桌面设备之间进行响应的项目。使用移动屏幕并打开一个向下很长的页面时出现问题，底部导航栏被推开所以我需要滚动到底部才能找到它，如何让它停留在屏幕底部而不是被推？

Answer 1

将 absolute 更改为 fixed。

当对 v-bottom-navigation 应用绝对值时，其位置会相对于其父项进行调整。应用 fixed 会导致元素在页面滚动时始终停留在同一个位置。

Vuetify v-bottom-navigation 下推

Vuetify v-bottom-navigation Pushed down

vue.js

vuetify.js