实现动态滚动效果的 Vue 组件：一个实战案例
动态滚动效果常常被用于展示动态数据，例如新闻列表、报警信息或实时数据流。这种效果不仅能够节省页面空间，还能增强用户体验。本文将通过一个具体的 Vue 组件案例，详细介绍如何实现一个动态滚动效果，尤其是如何在用户交互时暂停和恢复滚动。
场景描述
需求：需要在一个固定高度的容器中展示多条报警信息，并且这些信息会自动滚动展示。同时，当用户鼠标悬停在信息列表上时，滚动应暂停，鼠标移开后继续滚动。这种效果可以通过 Vue 和原生 JavaScript 的结合来实现。
实现思路
- 动态数据展示：使用 Vue 的
v-for指令动态渲染报警信息列表。 - 自动滚动逻辑：通过定时器和
scrollTop属性控制容器的滚动。 - 用户交互响应：监听鼠标进入和离开事件，动态控制滚动的暂停和恢复。
代码实现
脚本部分
在脚本中，我们实现了滚动逻辑，并通过 Vue 的生命周期钩子管理滚动效果的启动和销毁。
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import CardTitle from '@/components/CardTitle/index.vue';
const list = ref([
// 报警信息数据
]);
let isScrolling = true; // 控制滚动状态
let scrollInterval: any = null; // 定时器引用
onMounted(() => {
const container = document.querySelector('.list-container') as HTMLElement;
if (!container) {
console.error('滚动容器未找到，请检查类名是否正确');
return;
}
const scrollHeight = container.scrollHeight;
const containerHeight = container.clientHeight;
if (scrollHeight <= containerHeight) {
console.warn('内容高度小于容器高度，无需滚动');
return;
}
let scrollPosition = 0;
function smoothScroll() {
if (!isScrolling) return;
scrollPosition += 1; // 每次滚动的高度
if (scrollPosition >= scrollHeight - containerHeight) {
scrollPosition = 0; // 滚动到顶部
}
container.scrollTop = scrollPosition;
scrollInterval = setTimeout(smoothScroll, 100); // 递归调用，模拟滚动
}
// 开始滚动
smoothScroll();
// 鼠标进入暂停滚动
container.addEventListener('mouseenter', () => {
isScrolling = false;
clearTimeout(scrollInterval);
});
// 鼠标移出恢复滚动
container.addEventListener('mouseleave', () => {
isScrolling = true;
smoothScroll();
});
});
onUnmounted(() => {
// 清理事件监听器和定时器
const container = document.querySelector('.list-container') as HTMLElement;
if (container) {
container.removeEventListener('mouseenter', () => {});
container.removeEventListener('mouseleave', () => {});
}
clearTimeout(scrollInterval);
});
</script>
.list-container {
height: 100%;
overflow-y: auto; /* 允许垂直滚动 */
}关键点解析
- 滚动逻辑：通过
setTimeout和scrollTop实现平滑滚动。每次滚动固定高度，当滚动到底部时重置到顶部。 - 用户交互：监听
mouseenter和mouseleave事件，动态控制滚动状态。 - 性能优化：使用
clearTimeout清理定时器，避免内存泄漏。