尝试用 VueJS 和 Axios 实现无限滚动

Question

如标题所述，我正在尝试将 Vue 项目中的无限滚动实现为大学项目。

我已经通过 axios 导入了请求的 API，并希望我的应用程序检查 API 获取的页面，并在我滚动到页面底部时添加“1”。

我正在尝试使用 Observer 来做到这一点，但我认为我缺乏基础知识，因为我无法使其正常工作。

我也尝试过 vue-infinite-scroll 但是.. 好吧，我不知道为什么它不起作用，我最终删除了我试图使用它的代码行。

如果您查看我的 CodeSandbox 链接 (https://codesandbox.io/s/20082020-ldomq?file=/src/components/GamesList.vue)，您会发现我正在尝试在 GamesList.vue（我请求 API 的地方）中实现滚动功能。这是sn-p的代码：

export default {
  name: "GameList",
  data() {
    return {
      list: undefined
    };
  },
  components: {
    Observer
  },
  mounted() {
    Vue.axios.get("https://api.rawg.io/api/games?page=1").then(resp => {
      this.list = resp.data.results;
    });
  },
  methods: {
    async intersected() {
      this.page++;
    }
  }
};

我希望我能给你更多的信息，如果有要求我肯定会尝试，但是我的编程知识非常有限，我不确定我能帮助你多少。对此我很抱歉。

提前谢谢你，祝你有美好的一天。

Answer 1

我检查了你的代码。您可能正在尝试与本教程中的相同：https://vueschool.io/articles/vuejs-tutorials/build-an-infinite-scroll-component-using-intersection-observer-api/ 它在该教程中有效。观察者在您的代码中按预期工作，但您不对相交事件发出任何请求。 我改变了你的组件，现在它可以工作了：

export default {
  name: "GameList",
  data() {
    return {
      list: [],
      page: 1
    };
  },
  components: {
    Observer
  },
  methods: {
    async intersected() {
      const res = await fetch(
        `https://api.rawg.io/api/games?page=${this.page}&_limit=50`
      );

      this.page++;
      const items = await res.json();
      this.list = [...this.list, ...items.results];
    }
  }
};