首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

H5 全屏滑動翻頁控制最大頁數:now.row 邊界判斷邏輯修改

     編輯:程式設計綜合問答

代碼分析

原代碼中 `swipeUp` 翻頁邏輯:


if (last.row != 10) { now.row = last.row + 1; now.col = 1; pageMove(towards.up); }

`last.row != 10` 控制最大頁數為 10。`swipeDown` 中 `last.row != 1` 控制最小頁數。

修改最大頁數為 3


// 向上翻頁 (下一頁)
$(document).swipeUp(function() {
    if (isAnimating) return;
    last.row = now.row;
    last.col = now.col;
    // 修改 10 → 3
    if (last.row != 3) { 
        now.row = last.row + 1; 
        now.col = 1; 
        pageMove(towards.up); 
    }
});

// 向下翻頁 (上一頁)
$(document).swipeDown(function() {
    if (isAnimating) return;
    last.row = now.row;
    last.col = now.col;
    if (last.row != 1) { // 最小頁碼保持 1
        now.row = last.row - 1;
        now.col = 1;
        pageMove(towards.down);
    }
});

動態配置版本 (推薦)


const MAX_PAGE = 3; // 可從後端獲取或配置
const MIN_PAGE = 1;

$(document).swipeUp(function() {
    if (isAnimating) return;
    if (now.row < MAX_PAGE) {
        last.row = now.row;
        last.col = now.col;
        now.row++;
        now.col = 1;
        pageMove(towards.up);
    }
});

$(document).swipeDown(function() {
    if (isAnimating) return;
    if (now.row > MIN_PAGE) {
        last.row = now.row;
        last.col = now.col;
        now.row--;
        now.col = 1;
        pageMove(towards.down);
    }
});

補充:頁面 DOM 結構需對應

HTML 中需恰好存在 `.page-1-1`、`.page-2-1`、`.page-3-1` 三個頁面容器,CSS 動畫類 `pt-page-moveToTop` 等正確定義。

核心邏輯:**`now.row` 代表當前頁碼,邊界判斷直接控制最大/最小頁數**。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved