要在 Vue 3 中实现一个导航栏，当页面滚动时自动隐藏，并且可以滑动出现，你可以参考以下步骤：

  1. 创建导航栏组件： 设计你的导航栏 HTML 结构，并使用 Vue 组件来控制显示和隐藏。

  2. 监听滚动事件： 在组件的 setup 函数中，使用 onMounted 和 onUnmounted 生命周期钩子来添加和移除滚动事件监听器。

  3. 判断滚动方向： 在滚动事件的处理函数中，判断页面滚动的位置，并根据滚动的方向来动态更新一个状态变量，比如 isHidden。

  4. 应用过渡效果： 使用 Vue 的 transition 组件来包裹导航栏，并定义相应的 CSS 过渡效果。

  5. 动态绑定样式： 根据 isHidden 状态变量动态绑定导航栏的样式，比如 transform 或 opacity。

以下是一个简单的示例代码：

<template>
  <nav :class="{ hidden: isHidden }" class="navbar">
    <!-- 导航栏内容 -->
  </nav>
</template>

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

export default {
  setup() {
    const isHidden = ref(false);

    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const threshold = 150; // 设置触发隐藏的滚动阈值
      isHidden.value = scrollTop > threshold;
    };

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

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
    });

    return {
      isHidden,
    };
  },
};
</script>

<style>
.navbar {
  transition: transform 0.3s ease-in-out;
  /* 其他样式 */
}

.navbar.hidden {
  transform: translateY(-100%); /* 隐藏导航栏 */
}
</style>

在上面的代码中，当页面滚动超过 150px 时，导航栏将自动隐藏，当用户向上滚动时，导航栏会重新出现。transition CSS 属性确保了隐藏和显示的平滑过渡。

你可以根据需要调整阈值和过渡效果，以及添加更多的逻辑来完善导航栏的行为。