本教程详细介绍了如何使用 splide.js 实现一个垂直方向的全屏滑块，并解决鼠标滚轮滑动时一次性滚动多页的问题。核心解决方案在于合理配置 perpage 和 permove 选项，确保每次滚轮操作只滑动一页，从而提供流畅、精准的用户体验。
Splide.js 垂直全屏滑块基础配置
Splide.js 是一个轻量级、灵活且功能强大的 JavaScript 滑块库。要实现一个垂直方向的全屏滑块，首先需要设置其基本选项。常见的配置包括将滑动方向设置为 ttb（top-to-bottom，从上到下），并指定滑块高度为 100vh（100% 视口高度）以实现全屏效果，同时启用鼠标滚轮导航。
// 初始配置，可能导致多页滑动问题
const splide = new Splide( '#splide', {
direction : 'ttb', // 垂直方向
height : '100vh', // 全屏高度
wheel : true, // 启用鼠标滚轮
// ... 其他选项
});
splide.mount();然而，仅仅启用 wheel: true 选项，用户可能会遇到一个常见问题：当使用鼠标滚轮滚动时，滑块会一次性跳过多个页面，而不是每次只滑动一页。尽管 Splide 提供了 wheelMinThreshold 和 wheelSleep 等选项用于调整滚轮敏感度，但它们并不能直接控制每次滚轮操作滑动的页面数量。
核心解决方案：控制每页显示与每次移动
解决鼠标滚轮一次性滑动多页的关键在于精确控制 Splide 的 perPage 和 perMove 选项。
- perPage: 此选项定义了在滑块容器中同时显示的幻灯片数量。对于一个真正的“全屏滑块”，即每次只显示一页内容占据整个视口，perPage 应设置为 1。
- perMove: 此选项定义了每次滑动操作（无论是通过箭头、分页器还是鼠标滚轮）移动的幻灯片数量。为了确保每次滚轮操作只滑动一页，perMove 必须设置为 1。
通过将 perPage 和 perMove 都设置为 1，我们可以实现一个垂直方向的全屏滑块，每次鼠标滚轮滚动时，都能平滑地、精准地滑动到下一页或上一页。
完整示例代码
以下是一个实现垂直全屏单页滑动的完整 Splide.js 配置示例。
HTML 结构与基础 CSS
首先，在 HTML 中定义 Splide 滑块的结构，并添加必要的 CSS 样式以确保全屏显示和页面区分。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Splide.js 垂直全屏单页滑块</title>
<!-- 引入 Splide CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<style>
/* 重置默认样式，确保全屏 */
body, html {
margin: 0;
padding: 0;
overflow: hidden; /* 防止页面出现滚动条 */
height: 100%;
}
/* 每个 slide 占据整个视口高度，并居中内容 */
.splide__slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
color: white;
text-align: center;
height: 100vh; /* 确保每个 slide 占据整个视口高度 */
box-sizing: border-box; /* 边框和内边距包含在高度内 */
}
/* 为每个 slide 设置不同的背景颜色以便区分 */
.splide__slide:nth-child(1) { background-color: #ff5722; }
.splide__slide:nth-child(2) { background-color: #03a9f4; }
.splide__slide:nth-child(3) { background-color: #4caf50; }
.splide__slide:nth-child(4) { background-color: #9c27b0; }
</style>
</head>
<body>
<div class="splide" id="vertical-fullpage-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">页面 1</li>
<li class="splide__slide">页面 2</li>
<li class="splide__slide">页面 3</li>
<li class="splide__slide">页面 4</li>
</ul>
</div>
</div>
<!-- 引入 Splide JS -->
<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( '#vertical-fullpage-slider', {
direction : 'ttb', // 垂直方向滑动 (Top-to-Bottom)
height : '100vh', // 滑块高度占满整个视口
wheel : true, // 启用鼠标滚轮导航
perPage : 1, // 每次只显示一个页面
perMove : 1, // 每次滚动只移动一个页面
pagination : false, // 可选：隐藏分页器
arrows : false // 可选：隐藏导航箭头
}).mount();
});
</script>
</body>
</html>JavaScript 配置详解
在上述 JavaScript 代码中，关键的配置选项如下：
- direction: 'ttb'：将滑块设置为垂直方向。
- height: '100vh'：确保滑块的高度等于视口高度，实现全屏效果。
- wheel: true：激活鼠标滚轮事件，允许用户通过滚轮进行导航。
- perPage: 1：确保在任何给定时间，只有一个幻灯片完全显示在视口中。这是实现“全屏”体验的基础。
- perMove: 1：这是解决多页滑动问题的核心。它强制 Splide 在每次滚轮事件（或任何其他导航事件）发生时，只向前或向后移动一个幻灯片。
- pagination: false 和 arrows: false：这些是可选的配置，用于隐藏默认的分页器和导航箭头，以提供更简洁的全屏沉浸式体验。
注意事项与优化
- CSS 样式: 确保 body, html 没有默认的 margin 或 padding，并且 overflow: hidden 可以防止浏览器自身的滚动条干扰。每个 .splide__slide 元素的高度也应设置为 100vh，以确保内容真正占据整个屏幕。box-sizing: border-box 可以帮助在设置内边距或边框时，元素尺寸保持预期。
- 用户体验: 对于全屏滑块，通常会隐藏默认的导航箭头 (arrows: false) 和分页器 (pagination: false)，以提供更沉浸式的体验。如果需要导航提示，可以考虑自定义指示器或在页面边缘添加自定义导航按钮。
- 内容加载: 如果每个全屏页面包含大量图片或复杂内容，请考虑懒加载（Lazy Loading）等优化策略，以确保初始加载速度和滑动时的流畅性。
- 触摸设备: Splide.js 默认支持触摸滑动，因此无需额外配置即可在移动设备上实现类似的效果。
总结
通过精确配置 Splide.js 的 direction、height、wheel、perPage 和 perMove 选项，开发者可以轻松实现一个功能完善的垂直全屏滑块，并确保每次鼠标滚轮操作只滑动一页，从而提供直观且流畅的用户导航体验。perPage: 1 保证了全屏显示，而 perMove: 1 则精确控制了每次滚动的步长，有效解决了鼠标滚轮多页滑动的问题。
