vue实现京东楼层效果
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",
});
}
},
},注意事项
- 楼层内容区域需设置足够高度以确保滚动效果明显。
- 导航栏使用固定定位（fixed）以保持位置不变。
- 销毁组件时移除滚动事件监听，避免内存泄漏。
通过以上步骤即可实现类似京东的楼层滚动效果，导航栏会随页面滚动自动高亮当前楼层，点击导航栏可平滑滚动到对应楼层。
