当前位置：首页 > VUE

vue楼层导航怎么实现

2026-01-21 16:37:13VUE

实现 Vue 楼层导航的方法

核心思路
楼层导航通常用于长页面快速定位，通过监听滚动位置或点击导航项实现跳转。以下分模块实现：

数据结构设计

导航数据建议用数组存储，包含楼层 ID 和显示名称：

vue楼层导航怎么实现

data() {
  return {
    floors: [
      { id: 'section1', name: '楼层1' },
      { id: 'section2', name: '楼层2' }
    ]
  }
}

模板渲染

使用 v-for 渲染导航列表，绑定点击事件：

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

滚动跳转逻辑

通过 Element.scrollIntoView() 实现平滑滚动：

vue楼层导航怎么实现

methods: {
  scrollTo(id) {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
}

滚动高亮联动

监听滚动事件，计算当前可视区域对应的楼层：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const scrollPosition = window.scrollY;
    this.floors.forEach(floor => {
      const section = document.getElementById(floor.id);
      if (section.offsetTop <= scrollPosition + 100) {
        this.currentFloor = floor.id; // 需在 data 中定义 currentFloor
      }
    });
  }
}

模板中通过 :class 动态绑定高亮样式：

<li 
  v-for="floor in floors" 
  :class="{ active: currentFloor === floor.id }">
</li>

性能优化建议

对 handleScroll 使用防抖（如 Lodash 的 _.throttle）
使用 Intersection Observer API 替代滚动监听（兼容性需考虑）
导航栏可采用固定定位（CSS position: fixed）

完整示例代码

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

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

<script>
export default {
  data() {
    return {
      floors: [...],
      currentFloor: null
    }
  },
  methods: {
    scrollTo(id) { /* 同上 */ },
    handleScroll() { /* 同上 */ }
  },
  mounted() { /* 同上 */ }
}
</script>

<style>
.floor-nav {
  position: fixed;
  right: 20px;
  top: 50%;
}
.active {
  color: red;
}
</style>