vue实现列表滑动下拉加载数据

一、实现效果

二、实现思路

使用滚动事件监听器来检测用户是否滚动到底部,然后加载更多数据

  1. 监听滚动事件。
  2. 检测用户是否滚动到底部。
  3. 加载更多数据。

三、案例代码

复制代码
<div class="drawer-content">
  <div ref="loadMoreTrigger" class="load-more-trigger"></div>
    <div v-if="isLoading" class="loading-button">
      <button type="primary" loading>加载中...</button>
    </div>
</div>

import { onBeforeUnmount, onMounted, ref, watch } from 'vue';

const isLoading = ref(false);
const page = ref(1);

const loadMoreData = async () => {
  if (isLoading.value) return;
  isLoading.value = true;
  // 模拟异步加载数据
  setTimeout(() => {
    const newItems: any = props.chartTableData
      ?.slice(0, 10)
      .map((item) => ({ ...item, id: item.id + page.value * 100 }));
    cardList.value = [...cardList.value, ...newItems];
    page.value += 1;
    isLoading.value = false;
  }, 1000);
};

const handleScroll = () => {
  const drawerContent = document.querySelector('.drawer-content');
  if (drawerContent) {
    const { scrollTop, scrollHeight, clientHeight } = drawerContent;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      loadMoreData();
    }
  }
};

onMounted(() => {
  const drawerContent = document.querySelector('.drawer-content');
  if (drawerContent) {
    drawerContent.addEventListener('scroll', handleScroll);
  }
});

onBeforeUnmount(() => {
  const drawerContent = document.querySelector('.drawer-content');
  if (drawerContent) {
    drawerContent.removeEventListener('scroll', handleScroll);
  }
});


.load-more-trigger {
  height: 1px;
}
.loading-button {
  text-align: center;
  margin-top: 10px;
}
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色11 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅12 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊12 小时前
react中为啥使用剪头函数
前端·javascript·react.js