【问题标题】:How do I make the Vuetify.js "scroll off screen" toolbar work?如何使 Vuetify.js “滚动屏幕”工具栏工作?
【发布时间】:2023-03-21 22:07:01
【问题描述】:

我正在尝试将“滚动屏幕”行为添加到工具栏

代码如下:

https://codepen.io/anon/pen/MrONGb

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-toolbar
      absolute
      color="teal lighten-3"
      dark
      scroll-off-screen
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-toolbar>
      <div style="height:1500px"></div>
    </v-content>
  </v-app>
</div>

example page 上面写着:

对于这个例子,有一个特殊的标记,在 你的申请。

但我究竟不需要什么?如何使这段代码工作?

【问题讨论】:

    标签: vuetify.js


    【解决方案1】:

    你应该添加工具栏属性:scroll-threshold="1" scroll-off-screen="true"

    【讨论】:

      【解决方案2】:

      您需要在v-toolbar 组件上添加fixedapp 道具(删除absolute 道具)

      【讨论】:

      • 是的,我明白了,我添加了它是为了让人们可以向下滚动并看到它不起作用,工具栏不会回来,直到你一直滚动回来
      • @Un1 更新了,试试
      • 啊,现在可以了。即使没有app,只需添加fixed 即可,谢谢
      • 我建议修改答案,去掉“app”,因为没有必要。
      • @cosan 感谢您的意见。我不确定 op 是否修改了原始的 codepen?因为我看到它是fixed 属性。我很确定在发布问题时需要app,因为在使用其他一些组件时,一些额外的计算需要该属性。一般来说,我相信你会想在你的主工具栏、侧边栏和页脚等上包含app。或者可能是最近版本的 vuetify 发生了一些变化,我不确定,因为我没有测试这个功能后记.
      猜你喜欢
      • 1970-01-01
      • 2021-10-02
      • 1970-01-01
      • 2015-08-24
      • 1970-01-01
      • 2018-08-09
      • 2013-11-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多