为什么我的JQuery弹窗AJAX加载TAB对应分类ID数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？

发布日期： 2024-11-08 阅读量： 作者： 网络

jquery点击按钮弹窗，并ajax加载tab对应分类id数据

问题：点击弹窗的按钮，并AJAX加载特定分类ID的数据，每个分类TAB滚动到底部进行AJAX翻页，但只有第一个分类滚动加载正常，其他分类加载的是第一个分类的内容。

解答：

在原来的代码中，未设置分类ID和当前页码，也不在AJAX请求前判断是否正在加载中，导致了上述问题。改进后的代码如下：

// 初始化分类ID currentPage total 
let categoryId = 1, currentPage = 1, total = 0;
// 是否加载中
let isLoading = false;

// 加载分类数据
function loadCategoryData(id, page) {
    $(".tab_item").html('加载中...');
    $(this).addClass('cur').siblings().removeClass('cur');
    loadPageData(id, page);
}

// 监听滚动事件
$('.tab_item').scroll(function () {
    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) {
    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;
    });
}

# ai # 为什么

上一篇: 如何看Docker激活码

下一篇: docker启动了但连接不到怎么办

为什么我的JQuery弹窗AJAX加载TAB对应分类ID数据，只有第一个分类滚动加载正常，其他分类却加载第一个分类的内容？

随便看看