vue实现顶部滑动切换菜单效果

在Vue中实现顶部滑动切换菜单效果，可以通过以下步骤实现：

1. 首先，我们需要创建一个Vue组件来表示菜单。可以使用`v-for`指令循环渲染菜单选项，并通过`v-bind`绑定`isActive`属性来控制当前选中的菜单项。同时，设置一个`@click`事件监听器，使得点击菜单项时可以切换选中的项。

2. 在样式上，可以使用CSS来控制菜单项的样式，使得被选中的项可以突出显示。

3. 接下来，我们需要监控滚动事件。可以使用`window`对象的`scroll`事件，并将其绑定到一个滚动事件处理函数上。

4. 在滚动事件处理函数中，通过获取`window.pageYOffset`属性来获取当前滚动的位置。然后，计算出每个菜单项距离顶部的距离，与当前滚动位置进行比较。以此来判断当前应该激活哪个菜单项。

5. 最后，通过将`isActive`属性绑定到菜单项的样式上，以实现滚动切换菜单的效果。

综上所述，以上步骤可以实现Vue中顶部滑动切换菜单效果的实现。具体代码请参考以下示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" :class="{ active: item.isActive }" @click="setActive(index)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '菜单1', isActive: false },
        { title: '菜单2', isActive: false },
        { title: '菜单3', isActive: false },
      ],
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    setActive(index) {
      this.menuItems.forEach((item, i) => {
        item.isActive = i === index
      })
    },
    handleScroll() {
      const scrollY = window.pageYOffset
      const menuItems = this.$refs.menuItems
      menuItems.forEach((item, index) => {
        const rect = item.getBoundingClientRect()
        const offsetTop = rect.top + scrollY
        this.menuItems[index].isActive =
          scrollY >= offsetTop && scrollY < offsetTop + rect.height
      })
    },
  },
}
</script>

<style>
.active {
  /* 设置选中菜单项的样式 */
  background-color: #ccc;
}
</style>