前端vue3滑轮向下滑动继续发送axios请求

您可以使用Intersection Observer API来检测滚动事件并发送axios请求。Intersection Observer API是一个JavaScript API，它可以异步地观察目标元素与其祖先元素或顶级文档视窗之间的交叉状态。

以下是一个使用Intersection Observer API的示例：

<template>
  <div ref="scrollArea" style="height: 500px; overflow-y: scroll;">
    <div v-for="item in items" :key="item.id">{{ item.title }}</div>
    <div ref="sentinel"></div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      page: 1,
      perPage: 10,
      isLoading: false,
    };
  },
  mounted() {
    this.fetchData();
    const options = {
      root: this.$refs.scrollArea,
      rootMargin: '0px',
      threshold: 1.0,
    };
    const observer = new IntersectionObserver(this.handleIntersect, options);
    observer.observe(this.$refs.sentinel);
  },
  methods: {
    async fetchData() {
      this.isLoading = true;
      const response = await axios.get(`https://jsonplaceholder.typicode.com/posts?_page=${this.page}&_limit=${this.perPage}`);
      this.items = [...this.items, ...response.data];
      this.page += 1;
      this.isLoading = false;
    },
    handleIntersect(entries) {
      if (entries[0].isIntersecting && !this.isLoading) {
        this.fetchData();
      }
    },
  },
};
</script>

在上面的示例中，我们使用了Intersection Observer API来观察一个空的`div`元素，这个空的`div`元素被称为“sentinel”。该元素位于滚动区域的底部，并且具有一个阈值值为1.0，这意味着当sentinel元素完全进入视图时，`handleIntersect`方法将被调用。

在`handleIntersect`方法中，我们检查了sentinel元素的交叉状态，并在没有正在加载的数据时调用了`fetchData`方法，该方法使用axios发送请求获取更多的数据。

通过这种方式，您可以动态地加载更多的数据，而不需要用户手动单击按钮来触发请求。