17370845950

本教程详细介绍了如何使用 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 样式以确保全屏显示和页面区分。

    
    
    
    
    
    



    
        
            

                
页面 1
                
页面 2
                
页面 3
                
页面 4
            
        
    

    
    
    

JavaScript 配置详解

在上述 JavaScript 代码中，关键的配置选项如下：

• direction: 'ttb'：将滑块设置为垂直方向。
• height: '100vh'：确保滑块的高度等于视口高度，实现全屏效果。
• wheel: true：激活鼠标滚轮事件，允许用户通过滚轮进行导航。
• perPage: 1：确保在任何给定时间，只有一个幻灯片完全显示在视口中。这是实现“全屏”体验的基础。
• perMove: 1：这是解决多页滑动问题的核心。它强制 Splide 在每次滚轮事件（或任何其他导航事件）发生时，只向前或向后移动一个幻灯片。
• pagination: false 和 arrows: false：这些是可选的配置，用于隐藏默认的分页器和导航箭头，以提供更简洁的全屏沉浸式体验。

注意事项与优化

1. CSS 样式: 确保 body, html 没有默认的 margin 或 padding，并且 overflow: hidden 可以防止浏览器自身的滚动条干扰。每个 .splide__slide 元素的高度也应设置为 100vh，以确保内容真正占据整个屏幕。box-sizing: border-box 可以帮助在设置内边距或边框时，元素尺寸保持预期。
2. 用户体验: 对于全屏滑块，通常会隐藏默认的导航箭头 (arrows: false) 和分页器 (pagination: false)，以提供更沉浸式的体验。如果需要导航提示，可以考虑自定义指示器或在页面边缘添加自定义导航按钮。
3. 内容加载: 如果每个全屏页面包含大量图片或复杂内容，请考虑懒加载（Lazy Loading）等优化策略，以确保初始加载速度和滑动时的流畅性。
4. 触摸设备: Splide.js 默认支持触摸滑动，因此无需额外配置即可在移动设备上实现类似的效果。

总结

通过精确配置 Splide.js 的 direction、height、wheel、perPage 和 perMove 选项，开发者可以轻松实现一个功能完善的垂直全屏滑块，并确保每次鼠标滚轮操作只滑动一页，从而提供直观且流畅的用户导航体验。perPage: 1 保证了全屏显示，而 perMove: 1 则精确控制了每次滚动的步长，有效解决了鼠标滚轮多页滑动的问题。