jQuery弹窗、AJAX分页加载TAB分类数据及滚动加载详解
本文介绍如何用jquery实现点击按钮弹出弹窗，并根据选择的tab标签ajax加载对应分类id的数据，以及在滚动到底部时自动加载下一页数据的完整功能。 之前的代码存在切换tab时数据错乱的问题，因为currentpage变量未重置。本改进方案解决了这个问题，并优化了代码结构和性能。
改进后的方案主要做了以下几点：
简化代码结构: 避免不必要的变量和复杂逻辑，只维护当前页码currentPage。总页数由后端返回。
添加isLoading变量: 控制AJAX请求的并发，防止数据混乱。 滚动事件中，只有当isLoading为false时才发起新的请求。
优化滚动加载触发条件: 使用scrollHeight - scrollTop - containerHeight更精确地判断是否滚动到底部。
以下是改进后的代码：
Document .tab_p { display: flex; } .tab_item { height: 300px; overflow: auto; } .tab_item img { height: 50px; object-fit: cover; }点击我弹窗并加载分类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 { setTimeout(() => { const list = []; for (let i = 0; i { 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/占位，请替换成您的实际图片地址。 该改进后的代码更简洁、高效且易于维护。
以上就是如何用JQuery实现点击按钮弹窗、AJAX加载TAB分类数据并滚动到底部自动翻页？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1564159.html
微信扫一扫 
支付宝扫一扫 
