底部导航

v-bottom-navigation 组件是一个侧边栏的替代方案。它主要用于移动端，并有两个变量，图标+文本和转变。

用例

尽管底部导航栏原应与 vue-router 配合使用，但你也可以使用active.sync 属性来以编程方式控制按钮的激活状态。你可以使用按钮的 value 标签来更改它的值。

template script

  1. <template>
  2.   <v-bottom-navigation
  3.     v-model="bottomNav"
  4.   >
  5.     <v-btn value="recent">
  6.       <span>Recent</span>
  7.       <v-icon>mdi-history</v-icon>
  8.     </v-btn>
  10.     <v-btn value="favorites">
  11.       <span>Favorites</span>
  12.       <v-icon>mdi-heart</v-icon>
  13.     </v-btn>
  15.     <v-btn value="nearby">
  16.       <span>Nearby</span>
  17.       <v-icon>mdi-map-marker</v-icon>
  18.     </v-btn>
  19.   </v-bottom-navigation>
  20. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         bottomNav: 'recent',
  6.       }
  7.     },
  8.   }
  9. </script>

Bottom navigation（底部导航栏） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Bottom navigation（底部导航栏） - 图2

示例

下面是一些简单到复杂的例子。

颜色

color 属性会给底部导航栏的背景应用颜色。建议使用 light 和 dark 属性来提高与文本的对比度。

template script

  1. <template>
  2.   <v-bottom-navigation
  3.     :value="activeBtn"
  4.     color="purple lighten-1"
  5.   >
  6.     <v-btn>
  7.       <span>Recents</span>
  8.       <v-icon>mdi-history</v-icon>
  9.     </v-btn>
  11.     <v-btn>
  12.       <span>Favorites</span>
  13.       <v-icon>mdi-heart</v-icon>
  14.     </v-btn>
  16.     <v-btn>
  17.       <span>Nearby</span>
  18.       <v-icon>mdi-map-marker</v-icon>
  19.     </v-btn>
  20.   </v-bottom-navigation>
  21. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         activeBtn: 1,
  6.       }
  7.     },
  8.   }
  9. </script>

Bottom navigation（底部导航栏） - 图3

扩大

如果 v-bottom-navigation 有 grow 属性，其内的按钮会扩大并填满可用空间。

template script

  1. <template>
  2.   <v-bottom-navigation
  3.     :value="activeBtn"
  4.     grow
  5.     color="teal"
  6.   >
  7.     <v-btn>
  8.       <span>Recents</span>
  9.       <v-icon>mdi-history</v-icon>
  10.     </v-btn>
  12.     <v-btn>
  13.       <span>Favorites</span>
  14.       <v-icon>mdi-heart</v-icon>
  15.     </v-btn>
  17.     <v-btn>
  18.       <span>Nearby</span>
  19.       <v-icon>mdi-map-marker</v-icon>
  20.     </v-btn>
  21.   </v-bottom-navigation>
  22. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         activeBtn: 1,
  6.       }
  7.     },
  8.   }
  9. </script>

Bottom navigation（底部导航栏） - 图4

水平布局

horizontal 属性将导航文本置于与图标水平的附近位置。

template script

  1. <template>
  2.   <v-bottom-navigation
  3.     :value="activeBtn"
  4.     color="primary"
  5.     horizontal
  6.   >
  7.     <v-btn>
  8.       <span>Recents</span>
  9.       <v-icon>mdi-history</v-icon>
  10.     </v-btn>
  12.     <v-btn>
  13.       <span>Favorites</span>
  14.       <v-icon>mdi-heart</v-icon>
  15.     </v-btn>
  17.     <v-btn>
  18.       <span>Nearby</span>
  19.       <v-icon>mdi-map-marker</v-icon>
  20.     </v-btn>
  21.   </v-bottom-navigation>
  22. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         activeBtn: 1,
  6.       }
  7.     },
  8.   }
  9. </script>

Bottom navigation（底部导航栏） - 图5

变换

shift 属性将在按钮没被激活时隐藏它的文本。需用 <span> 包围 v-btn 的文本。

template script

  1. <template>
  2.   <v-bottom-navigation
  3.     v-model="bottomNav"
  4.     dark
  5.     shift
  6.   >
  7.     <v-btn>
  8.       <span>Video</span>
  9.       <v-icon>mdi-television-play</v-icon>
  10.     </v-btn>
  12.     <v-btn>
  13.       <span>Music</span>
  14.       <v-icon>mdi-music-note</v-icon>
  15.     </v-btn>
  17.     <v-btn>
  18.       <span>Book</span>
  19.       <v-icon>mdi-book</v-icon>
  20.     </v-btn>
  22.     <v-btn>
  23.       <span>Image</span>
  24.       <v-icon>mdi-image</v-icon>
  25.     </v-btn>
  26.   </v-bottom-navigation>
  27. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         bottomNav: 3,
  6.       }
  7.     },
  9.     computed: {
  10.       color () {
  11.         switch (this.bottomNav) {
  12.           case 0: return 'blue-grey'
  13.           case 1: return 'teal'
  14.           case 2: return 'brown'
  15.           case 3: return 'indigo'
  16.         }
  17.       },
  18.     },
  19.   }
  20. </script>

Bottom navigation（底部导航栏） - 图6

Vuetify Medium

Find guides, articles and tutorials on the official Vuetify publication

ads by Vuetify

](https://medium.com/vuetify?ref=vuetifyjs.com)

开关

v-bottom-navigation 的显示状态可使用 input-value 属性来控制。你也可以使用 v-model 来控制当前已经激活的按钮。

template script

  1. <template>
  2.   <div class="overflow-hidden">
  3.     <div class="text-center mb-2">
  4.       <v-btn
  5.         text
  6.         color="deep-purple"
  7.         @click="showNav = !showNav"
  8.       >
  9.         Toggle Nav
  10.       </v-btn>
  11.     </div>
  13.     <v-bottom-navigation
  14.       v-model="activeBtn"
  15.       :input-value="showNav"
  16.       color="indigo"
  17.     >
  18.       <v-btn>
  19.         <span>Recents</span>
  20.         <v-icon>mdi-history</v-icon>
  21.       </v-btn>
  23.       <v-btn>
  24.         <span>Favorites</span>
  25.         <v-icon>mdi-heart</v-icon>
  26.       </v-btn>
  28.       <v-btn>
  29.         <span>Nearby</span>
  30.         <v-icon>mdi-map-marker</v-icon>
  31.       </v-btn>
  32.     </v-bottom-navigation>
  33.   </div>
  34. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         activeBtn: 1,
  6.         showNav: true,
  7.       }
  8.     },
  9.   }
  10. </script>

Bottom navigation（底部导航栏） - 图7

滚动时隐藏

当目标元素滚动时，“滚动时隐藏”会隐藏 v-bottom-navigation。

template

  1. <template>
  2.   <v-card
  3.     class="overflow-hidden mx-auto"
  4.     height="200"
  5.     max-width="500"
  6.   >
  7.     <v-bottom-navigation
  8.       scroll-target="#scroll-area-1"
  9.       hide-on-scroll
  10.       absolute
  11.       horizontal
  12.     >
  13.       <v-btn text color="deep-purple accent-4">
  14.         <span>Recents</span>
  15.         <v-icon>mdi-history</v-icon>
  16.       </v-btn>
  18.       <v-btn text color="deep-purple accent-4">
  19.         <span>Favorites</span>
  20.         <v-icon>mdi-heart</v-icon>
  21.       </v-btn>
  23.       <v-btn text color="deep-purple accent-4">
  24.         <span>Nearby</span>
  25.         <v-icon>mdi-map-marker</v-icon>
  26.       </v-btn>
  27.     </v-bottom-navigation>
  29.     <v-sheet
  30.       id="scroll-area-1"
  31.       class="overflow-y-auto"
  32.       max-height="600"
  33.     >
  34.       <v-container style="height: 1500px;">
  36.       </v-container>
  37.     </v-sheet>
  38.   </v-card>
  39. </template>

Bottom navigation（底部导航栏） - 图8

滚动阈值

scroll-threshold 属性可以自定义触发 v-bottom-navigation 消失的滚动阈值。

template

  1. <template>
  2.   <v-card
  3.     class="overflow-hidden mx-auto"
  4.     height="200"
  5.     max-width="500"
  6.   >
  7.     <v-bottom-navigation
  8.       scroll-target="#scroll-area-2"
  9.       hide-on-scroll
  10.       scroll-threshold="500"
  11.       absolute
  12.       color="white"
  13.       horizontal
  14.     >
  15.       <v-btn>
  16.         <span>Recents</span>
  17.         <v-icon>mdi-history</v-icon>
  18.       </v-btn>
  20.       <v-btn>
  21.         <span>Favorites</span>
  22.         <v-icon>mdi-heart</v-icon>
  23.       </v-btn>
  25.       <v-btn>
  26.         <span>Nearby</span>
  27.         <v-icon>mdi-map-marker</v-icon>
  28.       </v-btn>
  29.     </v-bottom-navigation>
  31.     <v-sheet
  32.       id="scroll-area-2"
  33.       class="overflow-y-auto"
  34.       max-height="600"
  35.     >
  36.       <v-container style="height: 1500px;">
  38.       </v-container>
  39.     </v-sheet>
  40.   </v-card>
  41. </template>

Bottom navigation（底部导航栏） - 图9