vue2楼层滚动效果

### 实现 Vue3 中的楼层滚动效果 在 Vue3 中实现楼层滚动效果可以通过监听窗口滚动事件来动态更新当前显示的内容。为了确保 DOM 已经完全加载并可以操作，应当在 `onMounted` 生命周期钩子内添加相应的逻辑。 对于吸顶、锚点以及滚动高亮按钮的效果，在组件挂载完成后立即设置滚动监听器是一个常见做法[^1]： ```javascript import { onMounted, ref } from 'vue'; export default { setup() { const handleScroll = () => { // 处理滚动逻辑 }; onMounted(() => { window.addEventListener('scroll', handleScroll); // 清除监听器防止内存泄漏 return () => { window.removeEventListener('scroll', handleScroll); }; }); return {}; } }; ``` 如果希望使用第三方库如 Better Scroll 来增强页面内的滚动体验，则需要注意该插件应在 DOM 完全呈现后再初始化其实例对象，并传入目标容器作为参数[^2]: ```javascript // 假设已经安装了 better-scroll 并导入 bs import BScroll from '@better-scroll/core'; import ObserveDOM from '@better-scroll/observe-dom'; // 如果需要观察 dom 变化可引入此模块 BScroll.use(ObserveDOM); setup() { let scrollInstance; onMounted(() => { nextTick().then(() => { const wrapperElement = document.querySelector('.wrapper'); scrollInstance = new BScroll(wrapperElement, {}); }); return () => { if (scrollInstance) { scrollInstance.destroy(); } }; }); return {}; } ``` 当仅依赖于原生 JavaScript 和 CSS 而不借助额外框架时，也可以通过计算各部分相对于视口顶部的距离来进行楼层定位和切换样式[^3]： ```html <template> <div class="floor-container"> <!-- 各个楼层 --> <section v-for="(item, index) in floors" :key="index" :id="'floor-' + item.id">{{ item.name }}</section> <!-- 导航栏 --> <nav id="navigation-bar"></nav> </div> </template> <script lang="ts"> import { defineComponent, reactive, computed, watchEffect } from 'vue'; export default defineComponent({ name: 'FloorExample', setup() { const floors = reactive([ { id: 0, name: '一楼' }, { id: 1, name: '二楼' }, { id: 2, name: '三楼' } ]); function getOffsetTop(element: HTMLElement): number { var rect = element.getBoundingClientRect(); return Math.round(rect.top); } const activeIndex = computed<number>(() => { let currentIndex = -1; for (let i = 0; i < floors.length; ++i) { const floorElm = document.getElementById(`floor-${floors[i].id}`); if (!floorElm || getOffsetTop(floorElm as HTMLElement) >= 0 && getOffsetTop(floorElm as HTMLElement) <= 80 /* 预留导航高度 */) { currentIndex = i; break; } } return currentIndex; }); watchEffect(() => { console.log(activeIndex.value); updateNavigationHighlighting(activeIndex.value); }); function updateNavigationHighlighting(index: number){ // 更新导航栏选中状态... } return { floors, activeIndex }; } }); </script> ``` 上述代码展示了如何利用 Vue 的组合 API 结合简单的算法判断哪个楼层处于可见区域，并据此调整导航栏上的激活项。

### 关于 Vue 实现电梯动画效果 要实现 Vue 中的电梯动画效果，可以利用 Vue 的过渡系统以及 CSS 动画来完成。以下是详细的说明： #### 使用 Vue 过渡组件 `transition` 和自定义类名 Vue 提供了一个内置的 `<transition>` 组件，用于包裹需要执行动画的目标元素。通过设置进入和离开时的样式，可以轻松创建复杂的动画效果。 ```html <template> <div class="elevator-container"> <button @click="moveUp">上移</button> <button @click="moveDown">下移</button> <!-- 使用 transition 包裹目标 --> <transition name="elevator" mode="out-in"> <div :key="currentFloor" class="elevator">{{ currentFloor }}</div> </transition> </div> </template> <script> export default { data() { return { floors: Array.from({ length: 10 }, (_, i) => i + 1), // 假设有 10 层楼 currentFloor: 1, // 当前楼层初始化为第 1 层 }; }, methods: { moveUp() { const nextFloor = this.currentFloor + 1; if (nextFloor <= this.floors.length) { this.currentFloor = nextFloor; } }, moveDown() { const prevFloor = this.currentFloor - 1; if (prevFloor >= 1) { this.currentFloor = prevFloor; } }, }, }; </script> <style scoped> .elevator-container { position: relative; } /* 定义初始状态 */ .elevator-enter-active, .elevator-leave-active { transition: all 0.5s ease; } /* 定义进入和离开的状态 */ .elevator-enter-from, .elevator-leave-to { transform: translateY(-100px); /* 上移或下移动画 */ opacity: 0; /* 渐变透明度 */ } .elevator { background-color: lightblue; padding: 20px; text-align: center; } </style> ``` 上述代码展示了如何使用 Vue 的 `transition` 来模拟电梯上下移动的效果[^4]。当点击按钮切换楼层时，会触发对应的动画效果。 --- #### 结合动态计算属性优化性能 如果需要更复杂的功能（例如实时更新位置），可以通过绑定动态样式并结合 JavaScript 计算逻辑来增强交互体验。 ```javascript computed: { elevatorStyle() { const floorHeight = 100; // 每层高度假设为 100px const offset = -(this.currentFloor - 1) * floorHeight; return { transform: `translateY(${offset}px)` // 根据当前楼层调整偏移量 }; } }, ``` 在模板中应用该样式即可： ```html <div :style="elevatorStyle" class="elevator"></div> ``` 这种方式适合处理连续变化的位置调整[^5]。 --- #### 处理多条消息滚动显示 对于类似通知栏的消息滚动需求，可参考引用中的方法[^3]，结合 `v-for` 遍历数据列表，并配合条件渲染控制可见范围。 ```html <messageNotice v-for="(item, index) in visibleNotices" :key="index" :message="item.message" /> ``` 其中 `visibleNotices` 是经过筛选后的子集，可以根据时间轴或其他规则动态生成。 --- ### 总结 以上介绍了两种常见的 Vue 电梯动画实现方式：一种基于 `transition` 创建离散的楼层切换动画；另一种则依赖动态样式的精确控制，适用于平滑位移场景。两者均可满足不同业务需求下的视觉呈现。