本文将详细讲解如何使用JQuery实现点击按钮弹窗，并通过AJAX加载对应TAB分类ID的数据，同时在每个TAB滚动到底部时自动加载下一页数据的功能。 问题中提供的代码存在一个关键缺陷：每次点击TAB时，没有清除之前的加载数据，导致不同TAB的内容混杂在一起。 以下将对代码进行改进，并说明实现细节。
首先，我们需要理解问题的核心在于如何正确地管理每个TAB对应的AJAX请求和数据。原始代码的问题在于loadCategoryData函数中，滚动事件监听器始终作用于同一个.tab_item元素，导致不同分类的数据互相干扰。 解决方法是为每个TAB的数据加载过程设置独立的变量和状态管理。
改进后的代码如下，这里用模拟数据代替了实际的AJAX请求，方便理解和测试：
<!DOCTYPE html> <html lang="en"> <head> <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> </head> <body> <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> </body> <script src="./jquery.min.js"></script> <script> // 不需要总页数，因为总页数是后端返回的，前端不需要知道总页数，只需要知道当前页码即可 // 初始化分类ID currentPage total 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('加载中...'); $(this).addClass('cur').siblings().removeClass('cur'); loadPageData(id, page); } // 监听滚动事件 $('.tab_item').scroll(function () { console.log('scroll...', $('.tab_item').scrollTop(), $('.tab_item').innerHeight()) if (isLoading) { return; } // 判断是否滚动到底部距离150px 加载更多 const scrollTop = $(this).scrollTop(); const scrollHeight = $(this).prop('scrollHeight'); const containerHeight = $(this).outerHeight(); if (scrollHeight - scrollTop - containerHeight < 150) { // 滚动到底部距离小于150px，加载更多数据 currentPage++; if (currentPage <= total) { loadPageData(categoryId, currentPage); } } }); // 模拟个函数，用于加载某一页的数据 function getData(categoryId, page) { console.log('getData...', categoryId, page) return new promise((resolve, reject) => { setTimeout(() => { // 随机返回page条数据 const list = []; // 每次返回20条数据 for (var 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 = ""; for (var i = 0; i < list.length; i++) { html += '<div>@@##@@<span>"' + list[i].title + '"</span></div>'; } $(".tab_item").append(html); }).finally(() => { isLoading = false; }); } </script> </html>
这段代码通过isLoading变量避免了重复请求，并使用Promise处理异步操作，保证数据加载的顺序性和正确性。 同时，通过在滚动事件中判断距离底部距离来触发加载下一页，提高用户体验。 需要注意的是，实际应用中，/ajax.php?mod=tab接口需要根据实际情况进行替换。 并且，应该在后端返回的数据中包含总页数信息，以便前端能够准确判断是否需要加载下一页数据。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
