如何解决点击按钮弹窗、加载对应分类数据并滚动翻页的问题
要解决点击按钮弹窗、加载分类数据并滚动翻页的问题，可以按以下步骤操作：
定义变量记录状态
定义变量来记录当前分类ID、当前页码和总页数。
加载数据函数
创建函数，用于加载指定分类ID、页码的数据。
滚动事件监听
在内容区域添加滚动事件监听，当滚动到底部时，触发加载更多数据。
API 请求
使用 API 请求加载数据，并将返回的数据追加到内容区域。
监听点击事件
监听按钮和选项卡的点击事件，更新分类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 { setTimeout(() => { // 随机返回page条数据 const list = []; // 每次返回20条数据 for (var i = 0; i { // 更新总页数 total = totalPages; let html = ""; for (var i = 0; i < list.length; i++) { html += '@@##@@"' + list[i].title + '"'; } $(".tab_item").append(html); }).finally(() => { isLoading = false; });}
登录后复制
以上就是如何实现点击按钮弹窗、加载分类数据并滚动翻页？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2803581.html
