Vue.js 导航跟随页面滚动并自动高亮显示 | 代码示例和实现步骤

<template>
  <div class='main'>
    <div class='navback'>
      <div class='nav'>
        <template v-for='(navItem, index) in componentList'>
          <div
            @click.prevent='goAnchor(navItem.id, index)'
            :key='navItem.id'
            :class='{
              nav_active: index === activeIndex,
              nav_item: navItem.nav_item,
              nav_other: navItem.nav_other
            }'
          >
            {{ navItem.name }}
          </div>
        </template>
      </div>
    </div>
    <div class='content'>
      <!-- 页面内容 -->
    </div>
  </div>
</template>
<script>
// ...其他组件导入

export default {
  // ...组件属性
  data() {
    return {
      // ...其他数据
      activeIndex: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // ...其他方法
    handleScroll() {
      const navHeight = document.querySelector('.navback').offsetHeight
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      this.componentList.forEach((navItem, index) => {
        const anchorElement = document.querySelector(navItem.id)
        const top = anchorElement.getBoundingClientRect().top + scrollTop - navHeight

        if (scrollTop >= top) {
          this.activeIndex = index
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
// ...样式
</style>
<h2>实现步骤</h2>
<ol>
<li>
<p><strong>定义 activeIndex 变量:</strong> 在 <code>data</code> 中定义一个变量 <code>activeIndex</code> 来跟踪当前活动的导航项下标，初始值为 0。</p>
</li>
<li>
<p><strong>添加滚动事件监听:</strong> 在 <code>mounted</code> 生命周期钩子中添加一个监听滚动事件的函数 <code>handleScroll</code>。</p>
</li>
<li>
<p><strong>在 handleScroll 中处理逻辑:</strong></p>
<ul>
<li>获取导航栏高度 <code>navHeight</code> 和滚动条距离顶部的距离 <code>scrollTop</code>。</li>
<li>遍历导航项，获取每个导航项对应的锚点元素，并计算其距离顶部的距离 <code>top</code>。</li>
<li>如果滚动条距离顶部的距离大于等于锚点元素距离顶部的距离减去导航栏的高度，说明当前滚动到了该锚点位置，将 <code>activeIndex</code> 设置为当前导航项下标。</li>
</ul>
</li>
<li>
<p><strong>动态添加高亮类:</strong> 在导航项的 <code>class</code> 绑定中，根据 <code>activeIndex</code> 是否等于当前导航项下标，动态添加或移除 <code>nav_active</code> 类。</p>
</li>
<li>
<p><strong>移除滚动事件监听:</strong> 在 <code>beforeDestroy</code> 生命周期钩子函数中移除滚动事件监听，以避免内存泄漏。</p>
</li>
</ol>
<h2>代码示例</h2>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class='main'&gt;
    &lt;div class='navback'&gt;
      &lt;div class='nav'&gt;
        &lt;template v-for='(navItem, index) in componentList'&gt;
          &lt;div
            @click.prevent='goAnchor(navItem.id, index)'
            :key='navItem.id'
            :class='{
              nav_active: index === activeIndex,
              nav_item: navItem.nav_item,
              nav_other: navItem.nav_other
            }'
          &gt;
            {{ navItem.name }}
          &lt;/div&gt;
        &lt;/template&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='content'&gt;
      &lt;!-- 页面内容 --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// ...其他组件导入

export default {
  // ...组件属性
  data() {
    return {
      // ...其他数据
      activeIndex: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // ...其他方法
    handleScroll() {
      const navHeight = document.querySelector('.navback').offsetHeight
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      this.componentList.forEach((navItem, index) =&gt; {
        const anchorElement = document.querySelector(navItem.id)
        const top = anchorElement.getBoundingClientRect().top + scrollTop - navHeight

        if (scrollTop &gt;= top) {
          this.activeIndex = index
        }
      })
    }
  }
}
&lt;/script&gt;

&lt;style lang='scss' scoped&gt;
// ...样式
&lt;/style&gt;
</code></pre>
<p><strong>注意:</strong></p>
<ul>
<li>在代码示例中，<code>componentList</code> 是一个包含导航项信息的数组，<code>nav_item</code> 和 <code>nav_other</code> 是用来控制导航项样式的属性。</li>
<li><code>goAnchor</code> 函数用于处理导航点击事件，实现页面跳转。</li>
<li>确保在每个锚点元素上添加 <code>id</code> 属性，以便在代码中能够正确地获取到它们。</li>
</ul>
<p>通过以上步骤，你就可以轻松地实现导航跟随页面滚动并自动高亮显示的功能。</p>