vue3+ts页面实现楼层滚动

你可以使用Vue.js和TypeScript来实现楼层滚动。以下是实现的步骤：

1. 创建一个Vue组件，包含楼层的列表。每个楼层都有一个唯一的ID。

2. 在组件中，使用ref属性将滚动容器绑定到Vue实例。

3. 在组件的mounted生命周期钩子中，为每个楼层的ID创建一个Vue的响应式对象，并将其添加到data属性中。

4. 使用Intersection Observer API来观察每个楼层的可见性，并更新对应的响应式对象。

5. 在滚动容器上监听scroll事件，当滚动到某个楼层时，更新组件的当前楼层响应式对象。

6. 在模板中，使用v-for指令遍历楼层列表，并根据当前楼层的响应式对象的状态添加样式。

以下是示例代码：

<template>
  <div class="scroll-container" ref="scrollContainer" @scroll="onScroll">
    <div class="floor" v-for="floor in floors" :key="floor.id" :class="{ 'active': floor.active }">
      {{ floor.name }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

interface Floor {
  id: number
  name: string
  active: boolean
}

export default defineComponent({
  setup() {
    const scrollContainer = ref<HTMLElement>()
    const floors = reactive<Floor[]>([
      { id: 1, name: 'Floor 1', active: false },
      { id: 2, name: 'Floor 2', active: false },
      { id: 3, name: 'Floor 3', active: false },
      { id: 4, name: 'Floor 4', active: false },
      { id: 5, name: 'Floor 5', active: false },
    ])

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          const floor = floors.find((f) => f.id === Number(entry.target.id))
          if (floor) {
            floor.active = entry.isIntersecting
          }
        })
      },
      { root: scrollContainer.value }
    )

    const onScroll = () => {
      for (let i = 0; i < floors.length; i++) {
        const floor = floors[i]
        const element = document.getElementById(String(floor.id))
        if (element && element.getBoundingClientRect().top <= 0) {
          floor.active = true
        } else {
          floor.active = false
        }
      }
    }

    return {
      scrollContainer,
      floors,
      onScroll,
    }
  },
})
</script>

<style>
.scroll-container {
  height: 500px;
  overflow-y: scroll;
}

.floor {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: #ffffff;
}

.active {
  background-color: #7f7f7f;
}
</style>

在上面的示例代码中，我们使用了Intersection Observer API来观察每个楼层的可见性，并使用响应式对象来更新楼层的样式。同时，我们还监听了滚动容器的scroll事件来更新当前楼层的状态。最后，在模板中，我们使用v-for指令遍历楼层列表，并根据响应式对象的状态添加样式。