本教程详细介绍了如何使用 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 样式以确保全屏显示和页面区分。
Splide.js 垂直全屏单页滑块 /* 重置默认样式，确保全屏 */ 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; }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(); });
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 则精确控制了每次滚动的步长，有效解决了鼠标滚轮多页滑动的问题。
以上就是Splide.js 垂直全屏滑块实现：鼠标滚轮单页滑动控制指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529684.html
微信扫一扫 
支付宝扫一扫 
