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

<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;
}