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的地方）。这是代码段：

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

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

1 个答案: