0

与这篇文章相同的问题，只是它是 Vuetify。

有没有使用提供的 API 的解决方案？CSS 将是我选择的最后一个选项。

代码笔演示

<template>
  <v-app-bar app dark absolute class="navbar-bg" >
    <v-app-bar-nav-icon @click="toggleSidebar" />

    <v-toolbar-title>Homepage</v-toolbar-title>

  </v-app-bar>
</template>

4

1 回答 1

1

目前，API 中没有单一的道具。

但是您可以通过内置的 vuetify 类和指令帮助自己。

首先，你（很遗憾）需要编写一些 CSS 来手动禁用初始页面滚动：

html {
  overflow-y: hidden;
}

.scrollable {
  overflow-y: scroll;
}

然后，您需要<v-main>使用类将组件添加到您的应用程序中，scrollable pt-0 mt-16并将您未来的所有应用程序组件包装到其中。此类将从默认值调整填充<v-app-bar>并直接启用滚动<v-main>。

最后，您应该添加v-resize指令以<v-main>在用户调整页面大小时自动重新计算页面大小：

<v-main class="scrollable pt-0 mt-16" v-resize="onResize">
    ...your application data...
</v-main>

...
methods: {
  onResize() {
    //64px is v-app-bar height in your case
    document.querySelector(".scrollable").style.height = (window.innerHeight - 64) + 'px';
  }
},

而已。然后，您可以创建自定义组件来包装<v-main>并忘记此类操作。

带有示例的 Codepen 链接

于 2021-10-16T03:35:30.050 回答