vue实现滑动高亮

Vue 实现滑动高亮的方法

使用滚动事件监听和动态类绑定

在Vue中实现滑动高亮可以通过监听滚动事件，结合动态类绑定来实现。以下是一个完整的实现示例：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      :ref="`section-${index}`"
      :class="{ 'highlight': activeIndex === index }"
      class="content-section"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Section 1', 'Section 2', 'Section 3', 'Section 4'],
      activeIndex: 0,
      sectionOffsets: []
    }
  },
  mounted() {
    this.calculateOffsets()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    calculateOffsets() {
      this.sectionOffsets = this.items.map((_, index) => {
        return this.$refs[`section-${index}`][0].offsetTop
      })
    },
    handleScroll() {
      const scrollPosition = window.scrollY + 100 // 100px偏移量
      this.sectionOffsets.forEach((offset, index) => {
        const nextOffset = this.sectionOffsets[index + 1] || Infinity
        if (scrollPosition >= offset && scrollPosition < nextOffset) {
          this.activeIndex = index
        }
      })
    }
  }
}
</script>

<style>
.content-section {
  height: 500px;
  margin-bottom: 20px;
  transition: background-color 0.3s;
}
.highlight {
  background-color: #ffeb3b;
}
</style>

使用Intersection Observer API

Intersection Observer API提供了更高效的元素可见性检测方法：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      :ref="`section-${index}`"
      :class="{ 'highlight': activeIndex === index }"
      class="content-section"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Section 1', 'Section 2', 'Section 3', 'Section 4'],
      activeIndex: 0,
      observer: null
    }
  },
  mounted() {
    this.initObserver()
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect()
    }
  },
  methods: {
    initObserver() {
      const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5
      }

      this.observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const index = this.items.findIndex(
              (_, i) => this.$refs[`section-${i}`][0] === entry.target
            )
            if (index !== -1) {
              this.activeIndex = index
            }
          }
        })
      }, options)

      this.items.forEach((_, index) => {
        this.observer.observe(this.$refs[`section-${index}`][0])
      })
    }
  }
}
</script>

结合Vue Router实现路由高亮

如果内容对应不同路由，可以结合Vue Router实现：

<template>
  <div>
    <nav>
      <router-link 
        v-for="(item, index) in items" 
        :key="index" 
        :to="`/section/${index}`"
        :class="{ 'active': $route.params.id == index }"
      >
        {{ item }}
      </router-link>
    </nav>

    <div 
      v-for="(item, index) in items" 
      :key="index" 
      :id="`section-${index}`"
      class="content-section"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Section 1', 'Section 2', 'Section 3', 'Section 4']
    }
  },
  watch: {
    '$route'(to) {
      if (to.params.id) {
        const element = document.getElementById(`section-${to.params.id}`)
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' })
        }
      }
    }
  }
}
</script>

<style>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用第三方库vue-scrollactive

对于更复杂的需求，可以使用专门为Vue设计的滚动高亮库：

<template>
  <scrollactive class="my-nav">
    <a href="#section1" class="scrollactive-item">Section 1</a>
    <a href="#section2" class="scrollactive-item">Section 2</a>
    <a href="#section3" class="scrollactive-item">Section 3</a>
  </scrollactive>

  <div id="section1" class="section">...</div>
  <div id="section2" class="section">...</div>
  <div id="section3" class="section">...</div>
</template>

<script>
import Vue from 'vue'
import Scrollactive from 'vue-scrollactive'

export default {
  components: { Scrollactive }
}
</script>

<style>
.scrollactive-item.is-active {
  color: #42b983;
}
</style>

以上方法提供了从简单到复杂的多种实现方案，可以根据具体项目需求选择最适合的方式。