jquery实现弹窗ajax翻页tab数据加载
点击按钮后弹窗，并使用AJAX加载指定分类ID对应的数据。在滚动到底部时，进行AJAX翻页操作，加载下一页数据。
代码实现：
点击我弹窗并加载分类1数据
`
分类1
分类2
分类3
`
/*分类内容加载区*/
`
var categoryId = $('.tab_p p.cur').attr('data-id');
$('.tab_content').addClass("active");
$(".tab_item").html('加载中...');
loadCategoryData(categoryId, currentPage);})
$('.tab_p p').click(function(){
$(".tab_item").html('加载中...');
$(this).addClass('cur').siblings().removeClass('cur');
var categoryId = $(this).data('id');
// 加载对应分类的数据
loadCategoryData(categoryId, currentPage);})
function loadCategoryData(categoryId, page) {
currentPage = page || 1;
// 使用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;izuojiankuohaophpcnobj.length;i++){
html +='zuojiankuohaophpcndivyoujiankuohaophpcnzuojiankuohaophpcnimg src="'+obj[i].img_url+'"youjiankuohaophpcnzuojiankuohaophpcnspanyoujiankuohaophpcn"'+obj[i].title+'"zuojiankuohaophpcn/spanyoujiankuohaophpcnzuojiankuohaophpcn/divyoujiankuohaophpcn';
}
$(".tab_item").html(html);
}
});}
// 监听滚动事件
$('.tab_item').scroll(function() {
if ($('.tab_item').scrollTop() + $('.tab_item').height() youjiankuohaophpcn=$('.tab_item')[0].scrollHeight) {
// 当滚动到底部时加载下一页数据
currentPage++;
loadCategoryData(categoryId, currentPage);
}});
`
说明：
- categoryId表示当前分类的ID。
- currentPage表示当前页码，滚动加载时会自动增加。
- AJAX请求加载数据，并追加到.tab_item元素中。
- 滚动到底部时，会触发AJAX翻页操作，加载下一页数据。
