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
