Vue项目实战：详解 Swiper 横向轮播与 Table 纵向自动滚动的两种实现策略

在现代前端开发中，数据展示和视觉动效是提升用户体验的关键。滚动效果作为一种常见的交互形式，其应用场景非常广泛，但实现方式却因布局方向和组件特性而大相径庭。本文将通过一个真实的 Vue 项目案例，深入剖析两种经典的滚动实现：

我们将从代码层面进行逐行解析，并对比这两种滚动背后的逻辑差异。

一、横向滚动：Swiper 轮播图的优雅实现

在 index.vue 文件中，合作伙伴模块 (<div class="partner">) 使用了业界知名的 Swiper 库来实现横向轮播效果。这种方式不仅代码简洁，而且功能强大、性能优越。

1.1 核心代码结构

<!– index.vue (部分) –>
<template>
<!– … –>
<div class="bottom-pic">
<swiper
:modules="[Pagination, Autoplay]"
:slides-per-view="isMobile ? 3 : 5"
:space-between="30"
:loop="true"
:autoplay="{
delay: 1000,
disableOnInteraction: false,
stopOnLastSlide: false,
pauseOnMouseEnter: true
}"
:pagination="{ clickable: true }"
:navigation="false"
:centeredSlides="true"
>
<swiper-slide v-for="slide in slides" :key="slide.id">
<!– … slide content … –>
</swiper-slide>
</swiper>
</div>
</template>

<script setup>
// 引入 Swiper 核心及所需模块
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper";

// 引入样式
import "swiper/css";
import "swiper/css/pagination";
</script>

1.2 关键参数解析

• :modules="[Pagination, Autoplay]": Swiper 采用模块化设计，我们需要显式地引入并注册要用到的功能模块，这里是分页器 (Pagination) 和自动播放 (Autoplay)。
• :slides-per-view="isMobile ? 3 : 5": 这是响应式设计的核心。在 PC 端显示 5 个幻灯片，在移动端 (isMobile 为真) 显示 3 个，保证了不同设备上的良好观感。
• :space-between="30": 设置幻灯片之间的间距为 30px。
• :loop="true": 开启无缝循环模式。当滚动到最后一个幻灯片时，会无缝衔接回第一个，反之亦然，形成无限循环的效果。
• :autoplay="{…}": 配置自动播放行为。
  • delay: 1000: 切换幻灯片的时间间隔为 1000 毫秒（1秒）。
  • disableOnInteraction: false: 用户手动操作（如拖拽）后，自动播放不会停止。
  • pauseOnMouseEnter: true: 鼠标悬停在轮播区域上时，暂停自动播放，提升用户体验。
• :pagination="{ clickable: true }": 显示分页器（通常是小圆点），并允许用户点击切换。
• :centeredSlides="true": 将当前激活的幻灯片居中显示，两侧可以预览部分内容，视觉效果更佳。

1.3 实现原理图解

Swiper 的横向滚动本质上是通过 CSS 的 transform: translateX() 属性来移动一个包含所有幻灯片的容器（.swiper-wrapper）。Swiper 内部维护着当前的索引和位置状态，根据用户的交互或自动播放的定时器，计算出需要移动的距离，并应用到容器上，从而实现了流畅的横向滚动动画。

(示意图：Swiper 通过 transform 移动内部容器实现横向滚动)

二、纵向滚动：为 el-table 手动注入“生命”

与 Swiper 这种“开箱即用”的组件不同，Element Plus 的 el-table 组件本身并不提供自动滚动的功能。为了实现类似新闻跑马灯的效果，我们需要直接操作表格的 DOM 元素，通过 JavaScript 定时器来模拟滚动。

2.1 核心代码结构

<!– WaterLevelWarning.vue (部分) –>
<script>
export default {
methods: {
autoScroll(stop) {
// 1. 获取表格的可滚动区域
const table = this.$refs.myTable.layout.table.refs;
const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;

if (stop) {
// 停止滚动：清除定时器
clearInterval(this.scrolltimer);
this.scrolltimer = null;
} else {
// 启动滚动：设置定时器
this.scrolltimer = setInterval(() => {
// 2. 每次滚动 1px
tableWrapper.scrollTop += 1;

// 3. 判断是否滚动到底部
if (
tableWrapper.clientHeight + tableWrapper.scrollTop ==
tableWrapper.scrollHeight
) {
// 4. 如果到底，则重置 scrollTop 为 0，实现无缝循环
tableWrapper.scrollTop = 0;
}
}, 100); // 每100ms滚动一次
}
},
},
mounted() {
// 组件挂载后启动自动滚动
this.autoScroll();
},
beforeDestroy() {
// 组件销毁前停止滚动，防止内存泄漏
this.autoScroll(true);
},
};
</script>

2.2 关键逻辑解析

2.3 实现原理图解

这种纵向滚动是典型的“命令式”编程。我们没有依赖任何高级动画库，而是直接修改 DOM 元素的 scrollTop 属性。浏览器会自动将这个属性的变化渲染为滚动条的移动和内容的位移。

(示意图：通过 JS 定时修改 scrollTop 实现纵向滚动)

三、两种滚动方式的对比与总结

结论：

• 对于标准的、独立的内容块轮播，强烈推荐使用 Swiper 这样的专业库。它能让你用最少的代码获得最佳的效果和体验。
• 对于特定 UI 组件（如表格）的定制化滚动需求，在没有现成方案时，手动操作 DOM 是一种可行的“兜底”方案。但务必注意其脆弱性，并在组件生命周期中做好清理工作（如 beforeDestroy 中清除定时器）。

通过这两个案例，我们可以深刻体会到前端开发中“选择合适的工具做合适的事”的重要性。希望本文的分析能为你在处理类似需求时提供清晰的思路和参考。