JQUERY如何点击按钮弹窗,并AJAX加载TAB对应分类ID数据,每个TAB滚动到页底再进行AJAX翻页?
描述如题。
<div class="btn">点击我弹窗并加载分类1数据</div>
<div class="tab_p">
<p data-id="分类1ID" data-page="总页数">分类1</p>
<p data-id="分类2ID" data-page="总页数">分类2</p>
<p data-id="分类3ID" data-page="总页数">分类3</p>
</div>
<div class="tab_content">
<div class="tab_item">
/*分类内容加载区*/
</div>
</div>
JS代码如下:
$(document).on('click','.btn',function(){
var categoryId = $('.tab_p p.cur').attr('data-id');
var totalPages = $('.tab_p p.cur').attr('data-page');
$('.tab_content').addClass("active");
$(".tab_item").html('加载中...');
loadCategoryData(categoryId, totalPages);
})
$('.tab_p p').click(function(){
$(".tab_item").html('加载中...');
$(this).addClass('cur').siblings().removeClass('cur');
var categoryId = $(this).data('id');
var totalPages = $(this).data('page');
// 加载对应分类的数据
loadCategoryData(categoryId, totalPages);
})
function loadCategoryData(categoryId, totalPages) {
// 初始化页码为1
var currentPage = 1;
// 加载第一页数据
loadPageData(categoryId, currentPage);
// 监听滚动事件
$('.tab_item').scroll(function() {
if ($('.tab_item').scrollTop() + $('.tab_item').height() >=$('.tab_item')[0].scrollHeight) {
// 当滚动到底部时加载下一页数据
currentPage++;
if (currentPage <= totalPages) {
loadPageData(categoryId, currentPage);
}
}
});
}
function loadPageData(categoryId, page) {
// 使用AJAX请求加载数据
$.ajax({
url: '/ajax.php?mod=tab',
method: 'POST',
data: {
type_id: categoryId,
page: page
},
success: function(response) {
var obj=JSON.parse(response);
var html ="";
for(var i=0;i<obj.length;i++){
html +='<div><img src="'+obj[i].img_url+'"><span>"'+obj[i].title+'"</span></div>';
}
$(".tab_item").append(html);
}
});
}
再次麻烦您,基本都是按照您给我的代码稍微改了一点。只有第一个分类滚动是正常的,其它分类都会加载上一个已点击分类的内容。
比如:点击第二个的时候分类ID是2,从network里面看就会出现
ajax.php?mod=tab&type_id=-1&page=1
/*type_id=-1是第一个分类ID*/
ajax.php?mod=tab&type_id=2&page=1
回复
1个回答

test
2024-06-30
<!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><img src="' + list[i].img_url + '"><span>"' + list[i].title + '"</span></div>';
}
$(".tab_item").append(html);
}).finally(() => {
isLoading = false;
});
// // 使用AJAX请求加载数据
// $.ajax({
// url: '/ajax.php?mod=tab',
// method: 'POST',
// data: {
// type_id: categoryId,
// page: page
// },
// success: function (response) {
// var obj = JSON.parse(response);
// var html = "";
// for (var i = 0; i < obj.length; i++) {
// html += '<div><img src="' + obj[i].img_url + '"><span>"' + obj[i].title + '"</span></div>';
// }
// $(".tab_item").append(html);
// }
// });
}
</script>
</html>
以上是我的理解,实际业务可能有偏差。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容