Vuetify 粘性标题工具栏

Pat*_*han 8 vue.js vuejs2 vuetify.js

我使用v-toolbar但是当我向下滚动时它消失了。基本上我想要一个粘性标题。

这基本上是我的代码。

<div id="app">
  <v-app>
    <v-toolbar dense>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
   <main>
     <h1 v-for="n in 20" :key="n">{{n}}</h1>
    </main>
  </v-app>
</div>
Run Code Online (Sandbox Code Playgroud)

DjS*_*jSh 14

编辑:Vuetify 1.5 版:

您只需要添加fixed到您的v-toolbarwhich 固定位置,所以:

<v-toolbar dense fixed>
Run Code Online (Sandbox Code Playgroud)

您可以在此处查看文档

版本 2.0.0

从 vuetify 1.5 版更改

v-app-bar:为更好地扩展 v-toolbar 的功能而创建的全新组件。移动了 v-toolbar 中所有现有的滚动技术和应用程序功能。添加了新的滚动技术,例如折叠栏、滚动收缩等。

<v-app-bar fixed>将修复工具栏。文档

  • 看起来“fixed”不再是“v-toolbar”的支柱。 (2认同)