当前位置：首页 > VUE

vue实现楼层滚动

2026-02-24 12:06:44VUE

实现楼层滚动的基本思路

在Vue中实现楼层滚动效果，通常需要监听滚动事件，计算当前滚动位置与各楼层位置的对应关系，并通过动态样式或类名切换来高亮当前楼层导航。以下是具体实现方法：

监听滚动事件并计算当前楼层

在Vue组件的mounted生命周期中，为window添加滚动事件监听器，计算各楼层元素相对于视口的位置：

mounted() {
  window.addEventListener('scroll', this.handleScroll)
  this.floorElements = document.querySelectorAll('.floor-section')
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollPosition = window.scrollY + 100 // 添加偏移量
    this.floorElements.forEach((el, index) => {
      const offsetTop = el.offsetTop
      const offsetHeight = el.offsetHeight
      if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
        this.currentFloor = index
      }
    })
  }
}

实现导航点击滚动到对应楼层

为导航菜单添加点击事件，使用平滑滚动API跳转到对应楼层：

methods: {
  scrollToFloor(index) {
    const target = this.floorElements[index]
    window.scrollTo({
      top: target.offsetTop,
      behavior: 'smooth'
    })
  }
}

动态样式绑定

为当前激活的导航项添加高亮样式：

<div 
  v-for="(item, index) in floors" 
  :key="index"
  @click="scrollToFloor(index)"
  :class="{ 'active': currentFloor === index }"
>
  {{ item.name }}
</div>

优化滚动性能

使用节流函数减少滚动事件触发频率：

import { throttle } from 'lodash'

methods: {
  handleScroll: throttle(function() {
    // 计算逻辑
  }, 100)
}

完整组件示例

<template>
  <div>
    <div class="floor-nav">
      <div 
        v-for="(item, index) in floors" 
        :key="index"
        @click="scrollToFloor(index)"
        :class="{ 'active': currentFloor === index }"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="floor-section" v-for="(item, index) in floors" :key="index">
      <h2>{{ item.name }}</h2>
      <!-- 楼层内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentFloor: 0,
      floors: [
        { name: '楼层1' },
        { name: '楼层2' },
        { name: '楼层3' }
      ],
      floorElements: []
    }
  },
  methods: {
    scrollToFloor(index) {
      const target = this.floorElements[index]
      window.scrollTo({
        top: target.offsetTop,
        behavior: 'smooth'
      })
    },
    handleScroll() {
      const scrollPosition = window.scrollY + 100
      this.floorElements.forEach((el, index) => {
        const offsetTop = el.offsetTop
        const offsetHeight = el.offsetHeight
        if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
          this.currentFloor = index
        }
      })
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.floorElements = document.querySelectorAll('.floor-section')
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style>
.floor-nav div {
  cursor: pointer;
  padding: 10px;
}
.floor-nav div.active {
  color: red;
  font-weight: bold;
}
.floor-section {
  height: 100vh;
  padding: 20px;
}
</style>

使用Intersection Observer API替代滚动监听

对于现代浏览器，可以使用Intersection Observer API实现更高效的楼层检测：

mounted() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.currentFloor = parseInt(entry.target.dataset.index)
      }
    })
  }, {
    threshold: 0.5
  })

  this.floorElements.forEach(el => {
    observer.observe(el)
  })

  this.observer = observer
},
beforeDestroy() {
  this.observer.disconnect()
}