Splide.js 垂直全屏滑块：实现鼠标滚轮单页精准滑动-js教程-PHP中文网

Splide.js 垂直全屏滑块：实现鼠标滚轮单页精准滑动

DDD

发布： 2025-10-16 09:23:13

原创

557人浏览过

Splide.js 垂直全屏滑块：实现鼠标滚轮单页精准滑动

本文旨在解决使用 splide.js 构建垂直全屏滑块时，鼠标滚轮操作导致多页滑动的问题。通过详细阐述 `perpage` 和 `permove` 这两个关键配置项的作用，并提供示例代码，指导开发者如何精确控制滑块行为，确保每次滚轮互动只移动一页，从而实现流畅且符合预期的全屏滚动体验。

构建 Splide.js 垂直全屏滑块的基础配置

在利用 Splide.js 创建垂直全屏滑块时，开发者通常会配置 direction、height 和 wheel 等选项来定义其基本行为。例如，一个常见的初始配置可能如下：

new Splide( '.splide', {
    direction : 'ttb',   // 设置为从上到下垂直方向
    height    : '100vh', // 设置滑块高度为视口高度，实现全屏效果
    wheel     : true,    // 启用鼠标滚轮导航
    // ... 其他选项
}).mount();

登录后复制

然而，仅凭这些配置，用户在使用鼠标滚轮进行操作时，可能会发现滑块一次性跳过多页而非逐页滚动，这与预期中的全屏单页滚动体验不符。这种现象尤其在使用笔记本触控板或某些高精度鼠标设备时更为明显，可能导致用户体验不佳。

核心解决方案：perPage 与 perMove

要解决鼠标滚轮多页滑动的问题，关键在于理解并正确配置 perPage 和 perMove 这两个核心属性。它们共同决定了滑块的显示和移动逻辑。

perPage: 此选项定义了在可见区域内同时显示多少张幻灯片。对于全屏滑块而言，通常我们希望一次只显示一张幻灯片，因此将其设置为 1 是最常见的做法，以确保每张幻灯片占据整个可视区域。
perMove: 此选项控制每次滑动操作（无论是通过导航箭头、分页器、键盘还是鼠标滚轮）移动的幻灯片数量。要实现每次滚轮互动只移动一页的效果，必须将 perMove 设置为 1。这是防止鼠标滚轮一次性滑动多页的决定性配置。

当 perPage 和 perMove 都设置为 1 时，Splide.js 会确保在任何交互下，滑块都以单页为单位进行移动，从而提供精准的控制体验。

示例代码：实现单页精准滑动

以下是一个完整的 Splide.js 配置示例，演示了如何实现垂直全屏且鼠标滚轮单页滚动的滑块。

小羊标书

一键生成百页标书，让投标更简单高效

查看详情

首先，确保您的 HTML 结构包含 Splide 所需的基本元素。每个 splide__slide 都将作为一页全屏内容：

<!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.js 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%;
        }
        .splide__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            height: 100vh; /* 确保每个slide占据整个视口高度 */
        }
        .splide__slide:nth-child(even) {
            background-color: #4CAF50; /* 绿色 */
        }
        .splide__slide:nth-child(odd) {
            background-color: #2196F3; /* 蓝色 */
        }
    </style>
</head>
<body>

    <div class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">第一页内容</li>
                <li class="splide__slide">第二页内容</li>
                <li class="splide__slide">第三页内容</li>
                <li class="splide__slide">第四页内容</li>
            </ul>
        </div>
    </div>

    <!-- 引入 Splide.js JavaScript -->
    <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( '.splide', {
                direction   : 'ttb',        // 设置为垂直方向 (top-to-bottom)
                height      : '100vh',      // 滑块高度为视口高度，实现全屏效果
                wheel       : true,         // 启用鼠标滚轮导航
                perPage     : 1,            // 每页显示一张幻灯片
                perMove     : 1,            // 每次操作只移动一张幻灯片

                // 可选配置项，根据需求调整
                autoHeight  : false,        // 禁用自动调整高度，确保高度稳定
                pagination  : true,         // 显示分页器
                arrows      : true,         // 显示导航箭头
                rewind      : false,        // 禁用循环滑动，到达末尾停止
                speed       : 800,          // 滑动动画速度 (毫秒)
                easing      : 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', // 动画缓动函数
            }).mount();
        });
    </script>
</body>
</html>

登录后复制

在上述代码中，我们为每个 splide__slide 设置了 height: 100vh，以确保它们在垂直方向上占据整个视口，从而实现全屏单页的效果。同时，通过 perPage: 1 和 perMove: 1 确保了每次滚轮互动都只移动一页。

关键配置项详解与注意事项

direction: 'ttb': 这是实现垂直滑动的核心设置。ttb 代表 "top to bottom"（从上到下），是 Splide.js 中垂直方向的指定值。
height: '100vh': 将滑块的高度设置为视口高度的 100%，是实现全屏效果的关键。请确保您的 CSS 没有覆盖此高度设置，或者在 Splide 初始化后通过 CSS 进一步调整。
wheel: true: 启用鼠标滚轮事件监听，允许用户通过滚轮进行导航。
perPage: 1: 保证在任何时刻，视口中只显示一张完整的幻灯片。这对于“全屏”体验至关重要，它定义了可见区域内幻灯片的数量。
perMove: 1: 这是解决鼠标滚轮多页滑动的决定性设置。它强制 Splide 在每次滑动事件中只移动一个幻灯片单位，无论滚轮事件触发的频率或强度如何。
wheelMinThreshold 和 wheelSleep: 尽管这些选项也与鼠标滚轮行为有关，但它们主要用于调整滚轮事件的敏感度和冷却时间，以防止过于频繁或不必要的滑动。它们并不能直接解决滚轮一次性滑动多页的问题，该问题需要通过 perMove: 1 来解决。在实现单页滑动后，您可以根据需要调整这两个参数以优化用户体验，例如，增加 wheelSleep 可以减少连续滚轮事件触发的滑动次数。
响应式设计: 考虑在不同屏幕尺寸下，滑块的行为和样式是否依然符合预期。Splide.js 支持响应式选项，您可以在配置中添加 breakpoints 来为不同屏幕尺寸定义不同的设置，例如在小屏幕上禁用 wheel 或调整 height。

总结

通过正确配置 Splide.js 的 perPage 和 perMove 选项，特别是将 perMove 设置为 1，开发者可以有效地解决垂直全屏滑块在鼠标滚轮操作下多页滑动的问题。结合 direction: 'ttb' 和 height: '100vh'，即可实现一个流畅、可控且符合预期的垂直全屏单页滚动体验。理解这些核心配置项的作用，是构建高质量 Splide.js 滑块的关键，确保最终产品能够提供卓越的用户交互。

以上就是Splide.js 垂直全屏滑块：实现鼠标滚轮单页精准滑动的详细内容，更多请关注php中文网其它相关文章！