JQUERY如何点击按钮弹窗，并AJAX加载TAB对应分类ID数据，每个TAB滚动到页底再进行AJAX翻页？

发布于
2023-07-18 安徽

更新于
2023-07-18

描述如题。

<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

javascript html jquery

阅读 2k

2 个回答

得票最新

忆故人

44811844

发布于
2023-07-18 上海

更新于
2023-07-18

✓ 已被采纳

<!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>

以上是我的理解，实际业务可能有偏差。