本文旨在解决使用 splide.js 实现垂直全屏滑块时，鼠标滚轮交互导致多页滑动的问题。通过详细阐述 `perpage` 和 `permove` 两个核心配置项的作用，指导开发者如何精确控制每次滚轮事件只滑动一页，从而实现流畅、专业的单页全屏滚动体验。
Splide.js 垂直全屏滑块单页滚动控制指南
在使用 Splide.js 构建垂直全屏滑块时，开发者常遇到一个挑战：当启用鼠标滚轮导航功能后，滑块在一次滚轮操作中可能会意外地滑动多页，而非预期的单页滚动。这通常发生在配置了 direction: 'ttb' (从上到下) 和 wheel: true (启用滚轮) 等选项之后。为了实现精确的单页滚动体验，我们需要深入理解并合理配置 Splide.js 的 perPage 和 perMove 选项。
理解 perPage 与 perMove
Splide.js 提供了丰富的配置选项来精细控制滑块的行为，其中 perPage 和 perMove 对于实现单页滚动至关重要：
-
perPage (每页显示数量)
- 此选项决定了在容器中同时显示多少个滑块。
- 对于“全屏”滑块，通常意味着一次只显示一个完整的滑块内容，因此 perPage 常常被设置为 1。这确保了每个滑块元素都能占据整个视口区域（配合适当的 CSS 样式，如 height: 100vh）。
- 如果 perPage 设置为大于 1 的值，则表示在滑块容器中会同时显示多个滑块。
-
perMove (每次移动数量)
- 此选项控制每次滑块移动操作（无论是通过导航箭头、分页器、触摸滑动还是鼠标滚轮）时，实际移动的滑块数量。
- 为了实现“每次滚轮交互只滑动一页”的效果，perMove 必须设置为 1。这意味着无论用户如何操作，滑块都只会向前或向后移动一个单位的滑块。
实现单页滚动的关键配置
要实现一个垂直的全屏滑块，并且确保每次鼠标滚轮操作只滑动一页，核心在于将 perMove 设置为 1。同时，为了确保每个滑块都能呈现为“全屏”效果，我们通常会将 perPage 也设置为 1，并配合 CSS 样式来定义滑块的高度。
以下是实现这种效果的 Splide.js 配置示例：
document.addEventListener('DOMContentLoaded', function () {
new Splide('#fullpage-slider', {
direction: 'ttb', // 设置滑块方向为从上到下 (Top to Bottom)
height: '100vh', // 设置滑块容器高度为视口高度，实现全屏效果
wheel: true, // 启用鼠标滚轮导航
perPage: 1, // 每页显示一个滑块
perMove: 1, // 每次移动一个滑块
arrows: false, // 可选：隐藏导航箭头
pagination: false, // 可选：隐藏分页器
speed: 800, // 可选：设置滑动速度，单位毫秒
easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // 可选：设置缓动函数
// 其他可能需要的选项，例如：
// keyboard: true, // 启用键盘导航
// drag: false, // 禁用拖动滑动，专注于滚轮和键盘导航
}).mount();
});HTML 结构示例
为了配合上述 JavaScript 配置，您的 HTML 结构应包含一个 Splide 容器和多个滑块项：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Splide.js 垂直全屏滑块</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<style>
body {
margin: 0;
overflow: hidden; /* 防止浏览器默认滚动条 */
font-family: sans-serif;
color: white;
}
.splide__track {
height: 100vh; /* 确保轨道也占据整个视口高度 */
}
.splide__slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
height: 100vh; /* 每个滑块项占据整个视口高度 */
}
.splide__slide:nth-child(odd) {
background-color: #3498db;
}
.splide__slide:nth-child(even) {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div id="fullpage-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 1</li>
<li class="splide__slide">Slide 2</li>
<li class="splide__slide">Slide 3</li>
<li class="splide__slide">Slide 4</li>
<li class="splide__slide">Slide 5</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
new Splide('#fullpage-slider', {
direction: 'ttb',
height: '100vh',
wheel: true,
perPage: 1,
perMove: 1,
arrows: false,
pagination: false,
speed: 800,
easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
}).mount();
});
</script>
</body>
</html>注意事项与优化
- CSS 样式： 确保 .splide__track 和 .splide__slide 都设置了 height: 100vh，以保证每个滑块项能真正占据整个视口高度。同时，body 上的 overflow: hidden 可以防止浏览器自身的滚动条出现，确保 Splide 的滚轮控制能完全接管。
- 平滑度： speed 和 easing 选项可以调整滑动动画的速度和缓动效果，从而优化用户体验。
- 其他滚轮选项： Splide 还提供了 wheelMinThreshold (滚轮最小阈值) 和 wheelSleep (滚轮休眠时间) 等选项。这些选项主要用于微调滚轮灵敏度和防止过快连续触发，但解决“一次滑动多页”的核心问题仍是 perMove: 1。在 perMove: 1 生效后，可以根据需要进一步调整这些选项来优化滚轮交互的感受。
- 可访问性： 考虑为滑块添加键盘导航 (keyboard: true) 或其他辅助功能，以提升用户体验。
总结
通过正确配置 Splide.js 的 perPage: 1 和 perMove: 1 选项，结合 direction: 'ttb' 和 height: '100vh'，开发者可以轻松实现一个功能完善、响应灵敏且每次鼠标滚轮交互只滑动一页的垂直全屏滑块。这种精确的控制不仅提升了用户体验，也使得基于 Splide.js 的全屏演示或导航变得更加专业和流畅。
