如何在 Vuetify 中使 Appbar 背景颜色透明

Posted 2023-02-23

【中文标题】如何在 Vuetify 中使 Appbar 背景颜色透明

【英文标题】：How to Make Appbar Background Color Transparent in Vuetify

【发布时间】：2020-10-20 20:24:36

【问题描述】：

我不知道如何使app-bar in vuetify 透明。我尝试添加属性color="transparent"，但没有奏效。我试过color="rgba(0,0,0, 0)"，但没用。我试过color="shades.transparent" - 也没有用。

我想不通。知道如何实现吗？

谢谢。

【问题讨论】：

透明的工作，看看这支笔。 codepen.io/aaha/pen/qBbVNWG。你加载了 vuetify 颜色吗？

我删除了inverted-scroll 并对其进行了测试。如果我向下滚动，它是透明的。即使我不向下滚动，任何想法如何让它变得透明。

我认为您的意思是，当您删除反向滚动时，您有一个白色的应用栏，但是当您向下滚动时它会改变...这是您的问题吗？

是的——我希望它始终透明。不只是当我向下滚动时。

【参考方案1】：

如果你想让应用栏只有在顶部或顶部一定距离时才透明，你可以使用 window.onscroll 来改变背景颜色。

<v-app-bar :color="bg">...</v-app-bar>

然后在你的脚本部分

mounted() 
    window.onscroll = () => 
      this.changeColor();
    ;
  ,
  methods: 
    changeColor() 
      if (
        document.body.scrollTop > 100 ||
        document.documentElement.scrollTop > 100
      ) 
        this.bg = 'white';
       else 
        this.bg = 'transparent';
      
    ,
  ,

【讨论】：

感谢这正是我需要让 v-app-bar 在顶部透明，但任何向下滚动都会导致它改变颜色！干杯！

【参考方案2】：

当你有一个固定的应用栏时，vuetify 对 v-content 应用相等的填充，为了删除这个填充并将内容拉起来，你可以使用 class="pa-0"。然后 v-content 将从屏幕顶部开始，并使透明的 appbar 可见。我希望这是有道理的。

Codepen：https://codepen.io/aaha/pen/qBbVNWG

<v-app app>
    <v-app-bar app color="transparent">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
    <v-content class="ma-0 pa-0">
       <div class="d-flex flex-wrap justify-center" >
        <img src="https://picsum.photos/300/300"/>
        <img src="https://picsum.photos/600/300"/>
        <img src="https://picsum.photos/700/300"/>
        <img src="https://picsum.photos/200/300"/>
        <img src="https://picsum.photos/400/300"/>
        <img src="https://picsum.photos/500/300"/>
      </div>
    </v-content>
  </v-app>

【讨论】：

你能告诉我滚动时如何关闭这种透明度吗？我的意思是，只有在滚动顶部时它才会透明。

您正在寻找的是一个倒置滚动应用栏。 codepen.io/aaha/pen/YzXwgbRvuetifyjs.com/en/components/app-bars/#inverted-scrolling