jquery彈窗、ajax分頁加載TAB分類數據及滾動加載詳解
本文介紹如何用jquery實現點擊按鈕彈出彈窗，并根據選擇的tab標簽ajax加載對應分類id的數據，以及在滾動到底部時自動加載下一頁數據的完整功能。 之前的代碼存在切換tab時數據錯亂的問題，因為currentpage變量未重置。本改進方案解決了這個問題，并優化了代碼結構和性能。
改進后的方案主要做了以下幾點：
-
簡化代碼結構: 避免不必要的變量和復雜邏輯，只維護當前頁碼currentPage。總頁數由后端返回。
-
添加isLoading變量: 控制AJAX請求的并發，防止數據混亂。 滾動事件中，只有當isLoading為false時才發起新的請求。
-
優化滾動加載觸發條件: 使用scrollHeight – scrollTop – containerHeight更精確地判斷是否滾動到底部。
以下是改進后的代碼：
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab_p { display: flex; } .tab_item { height: 300px; overflow: auto; } .tab_item img { height: 50px; object-fit: cover; } </style> <div class="btn">點擊我彈窗并加載分類1數據</div> <div class="tab_p"> <p data-id="1">分類1</p> <p data-id="2">分類2</p> <p data-id="3">分類3</p> </div> <div class="tab_content"> <div class="tab_item"> <!-- 分類內容加載區 --> </div> </div>
let categoryId = 1, currentPage = 1, total = 0; let isLoading = false; $(document).on('click', '.btn', function() { loadCategoryData(categoryId, currentPage); }); $('.tab_p p').click(function() { currentPage = 1; categoryId = $(this).data('id'); loadCategoryData(categoryId, currentPage); }); function loadCategoryData(id, page) { $(".tab_item").html('加載中...'); loadPageData(id, page); } $('.tab_item').scroll(function() { if (isLoading) return; const scrollTop = $(this).scrollTop(); const scrollHeight = $(this).prop('scrollHeight'); const containerHeight = $(this).outerHeight(); if (scrollHeight - scrollTop - containerHeight < 150) { currentPage++; if (currentPage <= total) { loadPageData(categoryId, currentPage); } } }); function getData(categoryId, page) { return new promise((resolve, reject) => { setTimeout(() => { const list = []; for (let i = 0; i < 20; i++) { list.push({ title: `分類:${categoryId},標題:${i}`, img_url: `https://picsum.photos/200/300?random=${i}` }); } resolve({ list, page, totalPages: 100 }); // 模擬后端返回數據 }, 1000); }); } function loadPageData(categoryId, page) { if (isLoading) return; isLoading = true; getData(categoryId, page).then(({ list, page, totalPages }) => { total = totalPages; let html = ""; list.forEach(item => { html += `<div>@@##@@${item.title}</div>`; }); $(".tab_item").append(html); }).finally(() => { isLoading = false; }); }
這段代碼使用了Promise處理異步操作，并用更清晰的模板字符串生成HTML。 /ajax.php?mod=tab 部分需要替換成您的實際后端接口。 圖片地址也使用了https://picsum.photos/占位，請替換成您的實際圖片地址。 該改進后的代碼更簡潔、高效且易于維護。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
