Vuetify 3中v-app-bar滚动行为实现问题求助

一、先修复布局结构问题 #

你当前用<v-layout>包裹导航栏和<v-main>的写法，破坏了Vuetify的默认布局层级，导致滚动行为无法被正确监听。正确的布局应该让<v-app>直接包含导航栏、<v-main>和页脚，不需要额外的<v-layout>嵌套。

修改后的布局代码：

<template>
  <v-app>
    <NavigationBar/>
    <v-main>
      <slot />
    </v-main>
    <footer>
    </footer>
  </v-app>
</template>

二、配置v-app-bar的滚动行为 #

要实现向下滚动隐藏、向上滚动显示的核心效果，必须给v-app-bar添加两个关键属性：

• fixed：将导航栏固定在顶部
• scroll-behavior="hide"：启用滚动隐藏的内置行为

以你的主导航栏为例，修改后代码：

<v-app-bar 
  fixed
  scroll-behavior="hide"
  :elevation="5" 
  class="px-md-4" 
  color="surface" 
  height="100" 
  flat
>
  <!-- 导航栏原有内容 -->
</v-app-bar>

注意：页面内容需要足够长（能触发滚动）才能看到效果，可临时添加大量文本测试。

三、实现初始透明+滚动变色效果 #

要达成「初始透明→向下滚动消失→向上滚动显示白色」的需求，需要结合滚动事件监听和响应式变量控制样式：

修改导航栏组件代码：

<template>
  <div>
    <!-- 大屏顶部小导航栏 -->
    <v-app-bar 
      v-if="$vuetify.display.mdAndUp"
      fixed
      scroll-behavior="hide"
      :color="topNavColor"
      :opacity="topNavOpacity"
      class="px-md-4" 
      height="40" 
      flat
    >
      <template #prepend>
        <v-btn color="primary" icon="mdi-facebook" variant="plain"/>
        <v-btn color="primary" icon="mdi-instagram" variant="plain"/>
      </template>
      <template #append>
        <v-btn class="ms-1 mx-5" color="primary" variant="plain" prepend-icon="mdi-account" rounded>Login</v-btn>
        <v-btn class="ms-1" color="primary" variant="plain" prepend-icon="mdi-upload" rounded>File Upload</v-btn>
      </template>
    </v-app-bar>

    <!-- 主导航栏 -->
    <v-app-bar 
      fixed
      scroll-behavior="hide"
      :elevation="showMainNav ? 5 : 0"
      :color="showMainNav ? 'white' : 'transparent'"
      class="px-md-4" 
      height="100" 
      flat
    >
      <template #prepend>
        <v-app-bar-nav-icon
          v-if="$vuetify.display.smAndDown"
          @click="drawer = !drawer"
        />
      </template>

      <v-spacer v-if="$vuetify.display.smAndDown"/>
      
      <v-img
        class="me-sm-8"
        max-width="240"
        min-width="200"
        src="/img/logo-header.png"
      />

      <v-spacer />

      <template v-if="$vuetify.display.mdAndUp">
        <v-btn
          v-for="(item, i) in items"
          :key="i"
          :active="i === 0"
          color="primary"
          class="me-2 text-none"
          v-bind="item"
          size="large"
          rounded
        />
      </template>
    </v-app-bar>   
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const showMainNav = ref(true)
const lastScrollTop = ref(0)
const topNavOpacity = ref(1)
const topNavColor = ref('grey-lighten-3')

const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  
  // 向下滚动超过50px时隐藏导航栏
  if (scrollTop > lastScrollTop.value && scrollTop > 50) {
    showMainNav.value = false
    topNavOpacity.value = 0
  } 
  // 向上滚动时重新显示
  else if (scrollTop < lastScrollTop.value) {
    showMainNav.value = true
    topNavOpacity.value = 1
  }

  // 初始滚动0-50px时，顶部导航栏渐变透明
  if (scrollTop <= 50) {
    topNavOpacity.value = 1 - (scrollTop / 50)
  }

  lastScrollTop.value = scrollTop
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

四、额外注意事项 #

• 确保所有需要滚动控制的v-app-bar都添加了fixed属性
• 避免用自定义容器打乱Vuetify的默认布局层级
• 如果是Nuxt项目，确认nuxt.config.ts中Vuetify模块配置正确，未禁用滚动相关功能

内容的提问来源于stack exchange，提问作者Qiuzman