vue3中setup实现滑轮滑到底部继续发送axios请求

可以通过监听窗口的滚动事件，判断当前滚动位置是否到达底部，如果到达底部则发送请求。具体实现步骤如下：

1. 在setup函数中引入axios。

import axios from 'axios';

2. 在template中添加一个元素作为滚动区域，并为它绑定一个滚动事件。

<template>
  <div ref="scrollArea" @scroll="handleScroll">
    <!-- 滚动内容 -->
  </div>
</template>

3. 在setup函数中定义handleScroll函数，并在其中判断当前滚动位置是否到达底部。

setup() {
  const scrollArea = ref(null); // 滚动区域
  const page = ref(1); // 当前页数
  const loading = ref(false); // 是否正在加载中

  // 滚动到底部时触发
  const handleScroll = () => {
    const scrollTop = scrollArea.value.scrollTop; // 滚动距离
    const scrollHeight = scrollArea.value.scrollHeight; // 总高度
    const clientHeight = scrollArea.value.clientHeight; // 可视高度
    if (scrollTop + clientHeight >= scrollHeight) {
      loadMoreData(); // 加载更多数据
    }
  };

  // 加载更多数据
  const loadMoreData = async () => {
    if (loading.value) return; // 如果正在加载中则返回
    loading.value = true; // 设置正在加载状态
    try {
      const res = await axios.get(`/api/data?page=${page.value}`); // 发送请求
      // 处理获取到的数据
      page.value += 1; // 更新页数
    } catch (error) {
      console.log(error);
    } finally {
      loading.value = false; // 取消加载状态
    }
  };

  onMounted(() => {
    loadMoreData(); // 初始化时加载数据
  });

  return {
    scrollArea,
    handleScroll
  };
}

4. 在loadMoreData函数中发送axios请求获取更多数据，并在请求完成后更新页数和loading状态。