vue实现左侧楼层导航

Vue实现左侧楼层导航的方法

数据准备

创建一个包含楼层信息的数组，每个楼层对象包含id、名称和对应的DOM元素id。例如：

data() {
  return {
    floors: [
      { id: 1, name: "楼层1", targetId: "floor1" },
      { id: 2, name: "楼层2", targetId: "floor2" }
    ],
    activeFloor: null
  }
}

模板结构

在模板中创建导航列表和对应的楼层区域：

<div class="container">
  <div class="nav-wrapper">
    <ul class="floor-nav">
      <li v-for="floor in floors" 
          :key="floor.id"
          :class="{active: activeFloor === floor.id}"
          @click="scrollToFloor(floor)">
        {{ floor.name }}
      </li>
    </ul>
  </div>

  <div class="content">
    <div v-for="floor in floors" 
         :id="floor.targetId" 
         class="floor-section">
      <h2>{{ floor.name }}</h2>
      <!-- 楼层内容 -->
    </div>
  </div>
</div>

滚动定位功能

实现点击导航跳转到对应楼层的方法：

methods: {
  scrollToFloor(floor) {
    const element = document.getElementById(floor.targetId)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
      this.activeFloor = floor.id
    }
  }
}

滚动监听

添加滚动事件监听，自动更新当前激活的楼层导航：

mounted() {
  window.addEventListener("scroll", this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollPosition = window.scrollY
    this.floors.forEach(floor => {
      const element = document.getElementById(floor.targetId)
      if (element) {
        const offsetTop = element.offsetTop
        const offsetHeight = element.offsetHeight
        if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
          this.activeFloor = floor.id
        }
      }
    })
  }
}

样式优化

添加基础样式使导航固定并美化：

.container {
  display: flex;
}
.nav-wrapper {
  position: fixed;
  width: 200px;
}
.floor-nav {
  list-style: none;
  padding: 0;
}
.floor-nav li {
  padding: 10px;
  cursor: pointer;
}
.floor-nav li.active {
  color: #42b983;
  font-weight: bold;
}
.floor-section {
  min-height: 100vh;
  margin-left: 220px;
}

性能优化

对于大量楼层的情况，可以使用节流函数优化滚动事件：

import { throttle } from "lodash"

methods: {
  handleScroll: throttle(function() {
    // 原有逻辑
  }, 100)
}

响应式处理

添加响应式处理，在小屏幕下隐藏导航或改为其他交互方式：

@media (max-width: 768px) {
  .nav-wrapper {
    display: none;
  }
  .floor-section {
    margin-left: 0;
  }
}