Splide.js 垂直全屏滑块实现单页滚动的精确控制

本文旨在解决使用 splide.js 实现垂直全屏滑块时，鼠标滚轮交互导致多页滑动的问题。通过详细阐述 `perpage` 和 `permove` 两个核心配置项的作用，指导开发者如何精确控制每次滚轮事件只滑动一页，从而实现流畅、专业的单页全屏滚动体验。

Splide.js 垂直全屏滑块单页滚动控制指南

在使用 Splide.js 构建垂直全屏滑块时，开发者常遇到一个挑战：当启用鼠标滚轮导航功能后，滑块在一次滚轮操作中可能会意外地滑动多页，而非预期的单页滚动。这通常发生在配置了 direction: 'ttb' (从上到下) 和 wheel: true (启用滚轮) 等选项之后。为了实现精确的单页滚动体验，我们需要深入理解并合理配置 Splide.js 的 perPage 和 perMove 选项。

理解 perPage 与 perMove

Splide.js 提供了丰富的配置选项来精细控制滑块的行为，其中 perPage 和 perMove 对于实现单页滚动至关重要：

1. perPage (每页显示数量)

   • 此选项决定了在容器中同时显示多少个滑块。
   • 对于“全屏”滑块，通常意味着一次只显示一个完整的滑块内容，因此 perPage 常常被设置为 1。这确保了每个滑块元素都能占据整个视口区域（配合适当的 CSS 样式，如 height: 100vh）。
   • 如果 perPage 设置为大于 1 的值，则表示在滑块容器中会同时显示多个滑块。

2. 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 容器和多个滑块项：

    
    
    
    
    



    
        
            

                
Slide 1
                
Slide 2
                
Slide 3
                
Slide 4
                
Slide 5
            
        
    

    
    

注意事项与优化

• 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 的全屏演示或导航变得更加专业和流畅。