本教程详细介绍了如何使用 Splide.js 创建一个垂直方向的全屏滑块，并解决鼠标滚轮滚动时一次滑动多页的问题。通过正确配置 `direction`、`height`、`wheel`、`perPage` 和 `perMove` 等核心选项，您可以确保每次滚轮操作只平滑地切换一个页面，从而实现理想的单页滚动体验。
引言：Splide.js 垂直全屏滑块的挑战
在使用 Splide.js 构建垂直方向的全屏滑块时，开发者常常会遇到一个问题：当启用鼠标滚轮滚动（wheel: true）后，滑块在用户滚动鼠标滚轮时，并非如预期般每次只切换一页，而是会一次性滑动多页。这通常会导致用户体验不佳，尤其是在需要精确控制页面切换的全屏展示场景中。这个问题通常源于 Splide.js 在未明确指定 perPage 和 perMove 等选项时，对垂直方向滚轮事件的默认处理方式。
核心解决方案：perPage 与 perMove 选项
要解决鼠标滚轮一次滑动多页的问题，关键在于正确理解和配置 Splide.js 的 perPage 和 perMove 选项。这两个选项协同工作，精确控制滑块的显示和移动行为。
perPage 选项：定义每页显示的幻灯片数量perPage 选项决定了在滑块的可见区域内，同时显示多少个完整的幻灯片。对于实现“全屏单页”效果，即每次只显示一个完整的幻灯片，应将 perPage 设置为 1。
perMove 选项：定义每次移动的幻灯片数量perMove 选项控制每次导航操作（无论是通过箭头、分页器、触摸滑动还是鼠标滚轮）时，滑块实际移动的幻灯片数量。要确保鼠标滚轮每次只切换一个幻灯片，perMove 必须设置为 1。这是解决“一次滑动多页”问题的核心。
实现步骤与示例代码
下面将通过一个完整的示例，展示如何配置 Splide.js 以实现垂直全屏单页滚动的效果。
1. HTML 结构
首先，您需要一个基本的 Splide 容器和一些幻灯片元素。
Splide.js 垂直全屏单页滑块
2. JavaScript 配置
在
document.addEventListener('DOMContentLoaded', function () {
new Splide('#vertical-slider', {
direction: 'ttb', // 设置滑块方向为垂直 (Top to Bottom)
height: '100vh', // 设置滑块容器高度为视口高度，实现全屏
wheel: true, // 启用鼠标滚轮事件来控制滑块导航
perPage: 1, // 每页显示一个幻灯片，实现单页全屏显示
perMove: 1, // 每次滚轮操作只移动一个幻灯片，解决多页滚动问题
arrows: false, // 可选：隐藏导航箭头
pagination: true, // 可选：显示分页指示器
releaseWheel: true // 推荐：当滑块到达起点或终点时，允许滚轮事件继续滚动页面
}).mount();
});关键选项详解
-
direction: 'ttb':
- 此选项将滑块的方向设置为“从上到下”（Top to Bottom），使其成为垂直滑块。
-
height: '100vh':
- 将滑块容器的高度设置为 100vh（100% 视口高度），确保滑块占据整个屏幕高度，实现全屏效果。
-
wheel: true:
- 启用鼠标滚轮事件。当用户滚动鼠标滚轮时，Splide 滑块将响应并进行导航。
-
perPage: 1:
- 这是实现“全屏单页”显示的关键。它告诉 Splide 始终只显示一个完整的幻灯片。
-
perMove: 1:
- 这是解决鼠标滚轮一次滑动多页问题的核心。它强制 Splide 在每次导航操作（包括鼠标滚轮滚动）时，只移动一个幻灯片。
-
arrows: false (可选):
- 隐藏默认的左右导航箭头，因为在全屏垂直滑块中，用户通常更依赖滚轮或分页器。
-
pagination: true (可选):
- 显示分页指示器（小圆点），这对于垂直全屏滑块非常有用，可以直观地显示当前页码和总页数。
-
releaseWheel: true (可选但推荐):
- 此选项增强了用户体验。当滑块到达第一个或最后一个幻灯片时，如果页面上还有其他可滚动内容，鼠标滚轮事件将“释放”并允许滚动页面的其余部分，而不是卡在滑块上。
注意事项与最佳实践
- CSS 样式一致性： 确保 .splide__slide 元素本身也具有 height: 100vh; 样式，以确保每个幻灯片都能完全填充屏幕。同时，对 html 和 body 元素设置 margin: 0; padding: 0; height: 100%; overflow: hidden; 是实现无缝全屏体验的常见做法。
- 内容适应性： 垂直全屏滑块要求每个幻灯片的内容能够良好地适应 100vh 的高度。考虑使用 Flexbox 或 Grid 布局来管理幻灯片内部的内容，确保在不同屏幕尺寸下都能优雅地显示。
- 用户体验反馈： 除了 pagination，还可以考虑添加其他视觉或动画反馈，让用户清楚地知道他们正在切换页面。
- 无障碍性： 如果隐藏了默认的箭头导航，请确保提供其他键盘可访问的导航方式，以提升无障碍体验。Splide.js 通常会自动处理一些基本的键盘导航。
- 性能优化： 对于包含大量图片或复杂内容的滑块，考虑使用 Splide.js 提供的懒加载（lazyLoad: 'sequential' 或 'nearby'）等功能，以优化加载性能。
总结
通过正确配置 Splide.js 的 direction: 'ttb'、height: '100vh'、wheel: true，并结合关键的 perPage: 1 和 perMove: 1 选项，您可以轻松实现一个功能完善、用户体验流畅的垂直全屏单页滑块。这种配置不仅解决了鼠标滚轮一次滑动多页的问题，还为构建现代化的全屏展示页面提供了坚实的基础。
