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 === findIndex,
              nav_item: navItem.nav_item,
              nav_other: navItem.nav_other,
            }'
          >
            {{ navItem.name }}
          </div>
        </template>
      </div>
    </div>
    <div class='content'>
      <Home id='Home' />
      <Work id='Work' />
      <Life id='Life' />
      <Practice id='Practice' />
      <ThemeEducation id='ThemeEducation' />
      <Civilized id='Civilized' />
      <Brand id='Brand' />
      <Demeanour id='Demeanour' />
      <Honor id='Honor' />
      <StudyEducation id='StudyEducation' />
      <Footer />
    </div>
  </div>
</template>
<script>
import Home from '@/views/main/home/main-home.vue';
import Work from '@/views/main/work/main-work.vue';
import Life from '@/views/main/life/main-life.vue';
import Practice from '@/views/main/practice/main-practice.vue';
import ThemeEducation from '@/views/main/themeEducation/main-themeEducation.vue';
import Civilized from '@/views/main/civilized/main-civilized.vue';
import Brand from '@/views/main/brand/main-brand.vue';
import Demeanour from '@/views/main/demeanour/main-demeanour.vue';
import Honor from '@/views/main/honor/main-honor.vue';
import StudyEducation from '@/views/main/studyEducation/main-studyEducation.vue';
import Footer from '@/views/footer/footer-index.vue';

export default {
  components: {
    Home,
    Work,
    Life,
    Practice,
    ThemeEducation,
    Civilized,
    Brand,
    Demeanour,
    Honor,
    StudyEducation,
    Footer,
  },
  data() {
    return {
      componentList: [
        {
          cmp: 'Home',
          name: '首页',
          id: '#Home',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'Work',
          name: '支部日常工作',
          id: '#Work',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'Life',
          name: '领导干部过双重组织生活',
          id: '#Life',
          nav_item: true,
          nav_other: true,
        },
        {
          cmp: 'Practice',
          name: '一月一课一片一实践',
          id: '#Practice',
          nav_item: true,
          nav_other: true,
        },
        {
          cmp: 'ThemeEducation',
          name: '主题教育',
          id: '#ThemeEducation',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'Civilized',
          name: '文明创建',
          id: '#Civilized',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'Brand',
          name: '党建品牌',
          id: '#Brand',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'Demeanour',
          name: '支部风采',
          id: '#Demeanour',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'Honor',
          name: '荣誉功勋',
          id: '#Honor',
          nav_item: true,
          nav_other: false,
        },
        {
          cmp: 'StudyEducation',
          name: '学习教育',
          id: '#StudyEducation',
          nav_item: true,
          nav_other: false,
        },
      ],
      findIndex: 0,
    };
  },
  methods: {
    //锚点跳转  参数selector是id选择器(#XX)
    goAnchor(selector, index) {
      document.querySelector(selector).scrollIntoView({
        behavior: 'smooth',
      });
      this.findIndex = index;
    },
  },
};
</script>
<style lang='scss' scoped>
@import '@/assets/css/public_module.scss';
.main {
  width: 1;
  height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}
.navback {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #d30000;
}
.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  width: 1920px;

  .nav_item {
    @include flex-center;
    flex: 1;
    font-size: 20px;
    font-weight: 400;
    line-height: 60px;
    cursor: pointer;
    color: #ffffff;
  }
  .nav_item:hover {
    background: #a60000;
  }
  .nav_active {
    background: #a60000;
  }
  .nav_other {
    flex: 2;
  }
}
.content {
  // width: 1920px;
  width: 100vw;
  height: calc(100vh - 156px) !important;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #f4f2f2;
}
</style>
<p>在这段代码中，通过使用锚点跳转的方式来实现页面划到哪一块。在导航栏的点击事件中，调用了<code>goAnchor</code>方法，并传入了对应的锚点选择器和索引值。在<code>goAnchor</code>方法中，通过<code>document.querySelector(selector).scrollIntoView()</code>方法将页面滚动到对应的锚点位置，并设置滚动行为为平滑滚动。同时，将当前页面索引值赋值给<code>findIndex</code>，以便在导航栏中设置高亮样式。</p>
<pre><code class="language-javascript">methods: {
  //锚点跳转  参数selector是id选择器(#XX)
  goAnchor(selector, index) {
    document.querySelector(selector).scrollIntoView({
      behavior: 'smooth',
    });
    this.findIndex = index;
  },
},
</code></pre>
<p>在导航栏中，使用了<code>v-for</code>循环遍历<code>componentList</code>数组，并根据索引值和<code>findIndex</code>的值来判断是否添加高亮样式。通过绑定<code>class</code>属性和三元表达式来实现样式的切换。</p>
<pre><code class="language-html">&lt;template v-for='(navItem, index) in componentList'&gt;
  &lt;div
    @click.prevent='goAnchor(navItem.id, index)'
    :key='navItem.id'
    :class='{
      nav_active: index === findIndex,
      nav_item: navItem.nav_item,
      nav_other: navItem.nav_other,
    }'
  &gt;
    {{ navItem.name }}
  &lt;/div&gt;
&lt;/template&gt;
</code></pre>
<p>其中，<code>nav_active</code>类设置了高亮样式<code>background: #a60000;</code>。</p>
<pre><code class="language-css">.nav_item:hover {
  background: #a60000;
}
.nav_active {
  background: #a60000;
}
</code></pre>