如何实现点击按钮弹窗、加载分类数据并滚动翻页？

如何解决点击按钮弹窗、加载对应分类数据并滚动翻页的问题

要解决点击按钮弹窗、加载分类数据并滚动翻页的问题，可以按以下步骤操作：

1. 定义变量记录状态

   定义变量来记录当前分类ID、当前页码和总页数。

2. 加载数据函数

   创建函数，用于加载指定分类ID、页码的数据。

3. 滚动事件监听

   在内容区域添加滚动事件监听，当滚动到底部时，触发加载更多数据。

4. API 请求

   使用 API 请求加载数据，并将返回的数据追加到内容区域。

5. 监听点击事件

   监听按钮和选项卡的点击事件，更新分类ID和页码，并加载数据。

示例代码

// 不需要总页数，因为总页数是后端返回的，前端不需要知道总页数，只需要知道当前页码即可
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>@@##@@<span>"' + list[i].title + '"</span></div>';
    }
    $(".tab_item").append(html);
  }).finally(() => {
    isLoading = false;
  });
}

以上就是如何实现点击按钮弹窗、加载分类数据并滚动翻页？的详细内容，更多请关注其它相关文章！