Блог

Как указано в названии, я пытаюсь реализовать бесконечную прокрутку в проекте Vue как университетском проекте.

Я импортировал запрошенный API через axios и хотел бы, чтобы мое приложение проверяло страницу, которую получает 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  ;
    }
  }
};
  

Я хотел бы предоставить вам больше информации, и я, безусловно, попытаюсь, если потребуется, но мои знания в программировании очень ограничены, и я не уверен, насколько я смог бы вам помочь. Я сожалею об этом.

Заранее благодарю вас, желаю вам прекрасного дня.

Я проверил ваш код. Вероятно, вы пытаетесь сделать то же самое, что и в этом руководстве: https://vueschool.io/articles/vuejs-tutorials/build-an-infinite-scroll-component-using-intersection-observer-api/ И это работает в этом руководстве. Observer работает так, как ожидалось в вашем коде, но вы не отправляете никаких запросов на пересеченное событие. Я изменил ваш компонент, и теперь он работает:

 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}amp;_limit=50`
      );

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