jQuery弹窗、AJAX分页加载TAB分类数据及滚动加载详解
本文介绍如何用jquery实现点击按钮弹出弹窗，并根据选择的tab标签ajax加载对应分类id的数据，以及在滚动到底部时自动加载下一页数据的完整功能。 之前的代码存在切换tab时数据错乱的问题，因为currentpage变量未重置。本改进方案解决了这个问题，并优化了代码结构和性能。
改进后的方案主要做了以下几点：
-
简化代码结构: 避免不必要的变量和复杂逻辑，只维护当前页码
currentPage。总页数由后端返回。 -
添加
isLoading变量: 控制AJAX请求的并发，防止数据混乱。 滚动事件中，只有当isLoading为false时才发起新的请求。 -
优化滚动加载触发条件: 使用
scrollHeight - scrollTop - containerHeight更精确地判断是否滚动到底部。
以下是改进后的代码：
Document 点击我弹窗并加载分类1数据分类1
分类2
分类3
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 += `@@##@@${item.title}`;
});
$(".tab_item").append(html);
}).finally(() => {
isLoading = false;
});
}
这段代码使用了Promise处理异步操作，并用更清晰的模板字符串生成HTML。 /ajax.php?mod=tab 部分需要替换成您的实际后端接口。 图片地址也使用了https://picsum.photos/占位，请替换成您的实际图片地址。 该改进后的代码更简洁、高效且易于维护。
