页面滚动，顶部搜索栏（淡入淡出、默认透明），背景白色。Vue怎么写

您可以通过以下步骤使用 Vue 来实现页面滚动时顶部搜索栏的淡入淡出效果：

1. 在 Vue 组件中，使用 `data` 属性定义一个变量 `showSearchBar`，初始值为 `false`，表示搜索栏不可见。

2. 在页面的 `mounted` 钩子函数中，通过 `window.addEventListener` 监听 `scroll` 事件，当页面滚动时触发回调函数。

3. 在回调函数中，通过 `window.pageYOffset` 获取当前页面滚动的垂直距离，如果大于某个值（比如100px），则将 `showSearchBar` 设置为 `true`，否则设置为 `false`。

4. 在组件模板中，使用 `v-if` 指令根据 `showSearchBar` 的值来决定是否显示搜索栏，使用 `transition` 组件来实现淡入淡出效果。

下面是一个示例代码：

<template>
  <div>
    <div class="search-bar" v-if="showSearchBar">
      <!-- 搜索栏内容 -->
    </div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSearchBar: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset;
      this.showSearchBar = scrollTop > 100;
    }
  }
};
</script>

<style>
.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 0.5s;
}

.search-bar.show {
  opacity: 1;
}
</style>