vue3 script setup中楼层导航高亮跟着页面滚动的下标一致

在 Vue3 中，`script setup` 配合 `setup()` 函数可以让你更简洁地管理组件的状态。如果你想要实现在楼层导航（通常是一个列表，每项代表一个楼层）跟随页面滚动位置自动高亮显示对应楼层的功能，你可以这样做：

1. 定义状态：首先，在`setup`里创建一个表示当前楼层索引的状态变量，例如`currentFloorIndex`。

import { ref } from 'vue';

const currentFloorIndex = ref(0);

2. 监听滚动事件：使用Vue的`onMounted`钩子监听窗口的scroll事件，获取滚动高度并更新当前楼层。

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

function handleScroll() {
  const scrollPosition = window.innerHeight + document.documentElement.scrollTop;
  const floorHeights = Array.from(document.querySelectorAll('.floor')).map((el) => el.offsetTop); // 假设每个楼层都有一个data-v-...标识

  if (scrollPosition >= floorHeights[currentFloorIndex.value]) {
    highlightCurrentFloor(currentFloorIndex.value);
  }
}

3. 高亮函数：当滚动位置超过某一层楼时，将对应的`<li>`标签设置为选中样式。

function highlightCurrentFloor(index) {
  const floors = document.querySelectorAll('.floor');
  floors.forEach((el, i) => {
    if (i === index) {
      el.classList.add('active'); // 假设.active是你自定义的高亮类名
    } else {
      el.classList.remove('active');
    }
  });
}

4. 更新楼层索引：当滚动结束后，检查当前是否应该改变`currentFloorIndex`。

window.addEventListener('scroll', () => {
  const floorHeights = ...; // 重复上面的获取操作
  currentFloorIndex.value = Math.floor(window.pageYOffset / floorHeights[0]); // 假设所有楼层高度相同，简单计算
});

记得在HTML模板中为每个楼层添加`data-v-...`标识，以便在JavaScript中找到它们。