grabbee
@grabbee

Как запросить данные только если компонент виден на экране?

Страница в виде ленты фотографий и лайки к ним. На экране видно 2 фотографии, а на странице их больше 20. Информация по каждому лайку загружается отдельно. Возможно есть готовые компоненты которые следят за тем, виден ли компонент на экране. Хочу запрашивать данные с сервера только когда пользователь проскроллит страницу до каждой фотки.
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
mounted() {
  const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
      stopObservation();
      // здесь запрашивайте свои данные
    }
  }, {
    threshold: 1,
  });
  observer.observe(this.$el);

  const stopObservation = () => observer.disconnect();
  this.$on('hook:beforeDestroy', stopObservation);
},
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы