当前位置：首页 > VUE

vue实现京东楼层效果

2026-02-20 20:23:28VUE

Vue实现京东楼层效果

京东楼层效果通常指页面滚动到特定位置时，楼层导航栏会高亮显示当前所在的楼层区域。以下是实现该效果的步骤和代码示例。

准备工作

安装Vue及相关依赖，确保项目环境配置完成。楼层效果需要监听滚动事件并计算元素位置。

页面结构设计

创建楼层导航栏和对应的楼层内容区域。导航栏固定在页面一侧，点击可跳转到对应楼层。

<template>
  <div class="container">
    <div class="floors">
      <div 
        v-for="(floor, index) in floors" 
        :key="index"
        class="floor-item" 
        :class="{ active: currentFloor === index }"
        @click="scrollToFloor(index)"
      >
        {{ floor.name }}
      </div>
    </div>
    <div 
      v-for="(floor, index) in floors" 
      :key="index"
      class="content" 
      :id="`floor-${index}`"
    >
      <h2>{{ floor.name }}</h2>
      <div class="floor-content">{{ floor.content }}</div>
    </div>
  </div>
</template>

数据与样式定义

定义楼层数据和基本样式，确保楼层内容区域有足够高度以触发滚动效果。

<script>
export default {
  data() {
    return {
      floors: [
        { name: "家电", content: "家电楼层内容..." },
        { name: "服饰", content: "服饰楼层内容..." },
        { name: "食品", content: "食品楼层内容..." },
      ],
      currentFloor: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style>
.container {
  display: flex;
}
.floors {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.floor-item {
  padding: 10px;
  cursor: pointer;
}
.floor-item.active {
  color: red;
}
.content {
  margin-left: 100px;
  height: 800px;
}
</style>

滚动事件处理

监听页面滚动事件，计算各楼层位置并更新当前高亮楼层。

methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    this.floors.forEach((floor, index) => {
      const element = document.getElementById(`floor-${index}`);
      if (element) {
        const offsetTop = element.offsetTop;
        const offsetHeight = element.offsetHeight;
        if (scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight) {
          this.currentFloor = index;
        }
      }
    });
  },
  scrollToFloor(index) {
    const element = document.getElementById(`floor-${index}`);
    if (element) {
      window.scrollTo({
        top: element.offsetTop,
        behavior: "smooth",
      });
    }
  },
},