国产欧美久久一区二区三区,亚洲欧美中文日韩在线v日本,亚洲欧美一区二区三区在线

Splide.js 垂直全屏滑塊：實現(xiàn)鼠標滾輪單頁精準滑動

DDD

發(fā)布： 2025-10-16 09:23:13

原創(chuàng)

418人瀏覽過

Splide.js 垂直全屏滑塊：實現(xiàn)鼠標滾輪單頁精準滑動

本文旨在解決使用 splide.js 構(gòu)建垂直全屏滑塊時，鼠標滾輪操作導致多頁滑動的問題。通過詳細闡述 `perpage` 和 `permove` 這兩個關(guān)鍵配置項的作用，并提供示例代碼，指導開發(fā)者如何精確控制滑塊行為，確保每次滾輪互動只移動一頁，從而實現(xiàn)流暢且符合預(yù)期的全屏滾動體驗。

構(gòu)建 Splide.js 垂直全屏滑塊的基礎(chǔ)配置

在利用 Splide.js 創(chuàng)建垂直全屏滑塊時，開發(fā)者通常會配置 direction、height 和 wheel 等選項來定義其基本行為。例如，一個常見的初始配置可能如下：

new Splide( '.splide', {
    direction : 'ttb',   // 設(shè)置為從上到下垂直方向
    height    : '100vh', // 設(shè)置滑塊高度為視口高度，實現(xiàn)全屏效果
    wheel     : true,    // 啟用鼠標滾輪導航
    // ... 其他選項
}).mount();

登錄后復(fù)制

然而，僅憑這些配置，用戶在使用鼠標滾輪進行操作時，可能會發(fā)現(xiàn)滑塊一次性跳過多頁而非逐頁滾動，這與預(yù)期中的全屏單頁滾動體驗不符。這種現(xiàn)象尤其在使用筆記本觸控板或某些高精度鼠標設(shè)備時更為明顯，可能導致用戶體驗不佳。

核心解決方案：perPage 與 perMove

要解決鼠標滾輪多頁滑動的問題，關(guān)鍵在于理解并正確配置 perPage 和 perMove 這兩個核心屬性。它們共同決定了滑塊的顯示和移動邏輯。

perPage: 此選項定義了在可見區(qū)域內(nèi)同時顯示多少張幻燈片。對于全屏滑塊而言，通常我們希望一次只顯示一張幻燈片，因此將其設(shè)置為 1 是最常見的做法，以確保每張幻燈片占據(jù)整個可視區(qū)域。
perMove: 此選項控制每次滑動操作（無論是通過導航箭頭、分頁器、鍵盤還是鼠標滾輪）移動的幻燈片數(shù)量。要實現(xiàn)每次滾輪互動只移動一頁的效果，必須將 perMove 設(shè)置為 1。這是防止鼠標滾輪一次性滑動多頁的決定性配置。

當 perPage 和 perMove 都設(shè)置為 1 時，Splide.js 會確保在任何交互下，滑塊都以單頁為單位進行移動，從而提供精準的控制體驗。

示例代碼：實現(xiàn)單頁精準滑動

以下是一個完整的 Splide.js 配置示例，演示了如何實現(xiàn)垂直全屏且鼠標滾輪單頁滾動的滑塊。

小羊標書

一鍵生成百頁標書，讓投標更簡單高效

查看詳情

首先，確保您的 HTML 結(jié)構(gòu)包含 Splide 所需的基本元素。每個 splide__slide 都將作為一頁全屏內(nèi)容：

<!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; /* 防止頁面滾動條出現(xiàn) */
            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占據(jù)整個視口高度 */
        }
        .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">第一頁內(nèi)容</li>
                <li class="splide__slide">第二頁內(nèi)容</li>
                <li class="splide__slide">第三頁內(nèi)容</li>
                <li class="splide__slide">第四頁內(nèi)容</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',        // 設(shè)置為垂直方向 (top-to-bottom)
                height      : '100vh',      // 滑塊高度為視口高度，實現(xiàn)全屏效果
                wheel       : true,         // 啟用鼠標滾輪導航
                perPage     : 1,            // 每頁顯示一張幻燈片
                perMove     : 1,            // 每次操作只移動一張幻燈片

                // 可選配置項，根據(jù)需求調(diào)整
                autoHeight  : false,        // 禁用自動調(diào)整高度，確保高度穩(wěn)定
                pagination  : true,         // 顯示分頁器
                arrows      : true,         // 顯示導航箭頭
                rewind      : false,        // 禁用循環(huán)滑動，到達末尾停止
                speed       : 800,          // 滑動動畫速度 (毫秒)
                easing      : 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', // 動畫緩動函數(shù)
            }).mount();
        });
    </script>
</body>
</html>

登錄后復(fù)制

在上述代碼中，我們?yōu)槊總€ splide__slide 設(shè)置了 height: 100vh，以確保它們在垂直方向上占據(jù)整個視口，從而實現(xiàn)全屏單頁的效果。同時，通過 perPage: 1 和 perMove: 1 確保了每次滾輪互動都只移動一頁。

關(guān)鍵配置項詳解與注意事項

direction: 'ttb': 這是實現(xiàn)垂直滑動的核心設(shè)置。ttb 代表 "top to bottom"（從上到下），是 Splide.js 中垂直方向的指定值。
height: '100vh': 將滑塊的高度設(shè)置為視口高度的 100%，是實現(xiàn)全屏效果的關(guān)鍵。請確保您的 CSS 沒有覆蓋此高度設(shè)置，或者在 Splide 初始化后通過 CSS 進一步調(diào)整。
wheel: true: 啟用鼠標滾輪事件監(jiān)聽，允許用戶通過滾輪進行導航。
perPage: 1: 保證在任何時刻，視口中只顯示一張完整的幻燈片。這對于“全屏”體驗至關(guān)重要，它定義了可見區(qū)域內(nèi)幻燈片的數(shù)量。
perMove: 1: 這是解決鼠標滾輪多頁滑動的決定性設(shè)置。它強制 Splide 在每次滑動事件中只移動一個幻燈片單位，無論滾輪事件觸發(fā)的頻率或強度如何。
wheelMinThreshold 和 wheelSleep: 盡管這些選項也與鼠標滾輪行為有關(guān)，但它們主要用于調(diào)整滾輪事件的敏感度和冷卻時間，以防止過于頻繁或不必要的滑動。它們并不能直接解決滾輪一次性滑動多頁的問題，該問題需要通過 perMove: 1 來解決。在實現(xiàn)單頁滑動后，您可以根據(jù)需要調(diào)整這兩個參數(shù)以優(yōu)化用戶體驗，例如，增加 wheelSleep 可以減少連續(xù)滾輪事件觸發(fā)的滑動次數(shù)。
響應(yīng)式設(shè)計: 考慮在不同屏幕尺寸下，滑塊的行為和樣式是否依然符合預(yù)期。Splide.js 支持響應(yīng)式選項，您可以在配置中添加 breakpoints 來為不同屏幕尺寸定義不同的設(shè)置，例如在小屏幕上禁用 wheel 或調(diào)整 height。

總結(jié)

通過正確配置 Splide.js 的 perPage 和 perMove 選項，特別是將 perMove 設(shè)置為 1，開發(fā)者可以有效地解決垂直全屏滑塊在鼠標滾輪操作下多頁滑動的問題。結(jié)合 direction: 'ttb' 和 height: '100vh'，即可實現(xiàn)一個流暢、可控且符合預(yù)期的垂直全屏單頁滾動體驗。理解這些核心配置項的作用，是構(gòu)建高質(zhì)量 Splide.js 滑塊的關(guān)鍵，確保最終產(chǎn)品能夠提供卓越的用戶交互。

以上就是Splide.js 垂直全屏滑塊：實現(xiàn)鼠標滾輪單頁精準滑動的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標簽：