当前位置：首页 > VUE

vue实现电梯导航

2026-02-17 18:14:06VUE

vue实现电梯导航的方法

电梯导航（Anchor Navigation）是一种页面内快速跳转的交互方式，常用于长页面中快速定位不同章节。以下是几种Vue实现方案：

基于原生scrollIntoView的实现

利用浏览器原生API实现平滑滚动，无需额外依赖：

<template>
  <div>
    <nav>
      <ul>
        <li v-for="(item, index) in sections" :key="index">
          <a @click="scrollTo(item.id)">{{ item.title }}</a>
        </li>
      </ul>
    </nav>

    <section 
      v-for="(item, index) in sections" 
      :id="item.id" 
      :key="index"
      class="content-section"
    >
      <h2>{{ item.title }}</h2>
      <!-- 内容区域 -->
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sections: [
        { id: 'section1', title: '第一部分' },
        { id: 'section2', title: '第二部分' }
      ]
    }
  },
  methods: {
    scrollTo(id) {
      document.getElementById(id).scrollIntoView({
        behavior: 'smooth'
      });
    }
  }
}
</script>

使用vue-router的hash模式

适用于SPA应用，通过路由hash实现定位：

// 路由配置
{
  path: '/page',
  component: Page,
  children: [
    { path: '', redirect: 'section1' },
    { path: 'section1', component: Section1 },
    { path: 'section2', component: Section2 }
  ]
}

// 导航组件
<router-link 
  v-for="(item, index) in sections" 
  :to="{ hash: `#${item.id}` }" 
  :key="index"
>
  {{ item.title }}
</router-link>

结合IntersectionObserver实现高亮

实时检测当前可见区域并高亮对应导航项：

// 在mounted中设置观察器
mounted() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.activeSection = entry.target.id;
      }
    });
  }, { threshold: 0.5 });

  this.sections.forEach(item => {
    observer.observe(document.getElementById(item.id));
  });
}

// 模板中添加高亮类
<a 
  @click="scrollTo(item.id)" 
  :class="{ active: activeSection === item.id }"
>
  {{ item.title }}
</a>

使用第三方库vue-scrollto

安装插件后提供更丰富的滚动控制：

npm install vue-scrollto

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

// 使用指令
<a v-scroll-to="`#${item.id}`">{{ item.title }}</a>

// 或通过方法调用
this.$scrollTo(`#${item.id}`, 500, {
  easing: 'ease-in',
  offset: -20
})

固定定位导航栏

添加CSS实现导航栏始终可见：

vue实现电梯导航

nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.content-section {
  min-height: 100vh;
  padding: 20px;
}