vue楼层的实现
Vue 楼层效果的实现方法
Vue 中实现楼层效果（类似电商网站的分类跳转）通常结合滚动监听和锚点定位技术。以下是两种常见实现方式：
基于滚动监听与动态样式
通过监听滚动位置，动态切换楼层导航的激活状态，并实现点击跳转。
<template>
<div class="floor-container">
<!-- 楼层导航 -->
<div class="floor-nav">
<div
v-for="(item, index) in floors"
:key="index"
:class="{ active: currentFloor === index }"
@click="scrollToFloor(index)"
>
{{ item.name }}
</div>
</div>
<!-- 楼层内容 -->
<div
v-for="(item, index) in floors"
:id="`floor-${index}`"
:key="index"
class="floor-item"
>
<h2>{{ item.name }}</h2>
<!-- 楼层内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
floors: [
{ name: '楼层1' },
{ name: '楼层2' },
{ name: '楼层3' }
],
currentFloor: 0
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
this.floors.forEach((_, index) => {
const el = document.getElementById(`floor-${index}`)
if (el.offsetTop <= scrollTop + 100) {
this.currentFloor = index
}
})
},
scrollToFloor(index) {
const el = document.getElementById(`floor-${index}`)
window.scrollTo({
top: el.offsetTop,
behavior: 'smooth'
})
}
}
}
</script>
<style>
.floor-nav {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.floor-nav div {
padding: 10px;
cursor: pointer;
}
.floor-nav div.active {
color: red;
font-weight: bold;
}
.floor-item {
height: 100vh;
padding: 20px;
}
</style>使用第三方库实现
对于更复杂的交互效果，可以使用 vue-scrollto 等插件简化实现：
安装依赖：
npm install vue-scrollto实现代码：
<template>
<div>
<div class="floor-nav">
<button
v-for="(item, index) in floors"
:key="index"
@click="scrollTo(index)"
>
{{ item.name }}
</button>
</div>
<div
v-for="(item, index) in floors"
:id="`floor-${index}`"
:key="index"
class="floor-section"
>
<h2>{{ item.name }}</h2>
</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto'
export default {
data() {
return {
floors: [
{ name: '家电' },
{ name: '服饰' },
{ name: '食品' }
]
}
},
methods: {
scrollTo(index) {
VueScrollTo.scrollTo(`#floor-${index}`, 500)
}
}
}
</script>性能优化建议
- 对滚动事件添加节流处理，避免频繁触发：
import { throttle } from 'lodash'
methods: { handleScroll: throttle(function() { // 滚动逻辑 }, 200) }
2. 对于大量楼层内容，考虑虚拟滚动技术（如 `vue-virtual-scroller`）
3. 移动端适配时，可以使用 `Intersection Observer API` 替代滚动监听，性能更优
以上方法可根据实际项目需求选择或组合使用，实现流畅的楼层跳转效果。
