Vue - 무한 스크롤, Infinite Scroll

인피니트 스크롤

- Infinite Scroll, 무한 스크롤 

 

IntersectionObserver 

- 생성한 인스턴스로 관찰자를 초기화하고 관찰할 대상을 지정

 

소스코드

// 로딩아이콘 - 관찰대상
#infinite-scroll(ref="infinitescroll")
  font-awesome-icon(:icon="['fas', 'spinner']" spin)

 

methods: {
  fetchList() {
    let req = new Request(this.currentUrl);
    fetch(req)
      .then(res => {
        if (res.status === 200) {
          return res.json();
        }
      })
      .then(data => {
        this.nextUrl = data.next;
      })
      .catch(error => {
        console.log(error);
      });
  },
  autoScroll() {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.intersectionRatio > 0 && this.nextUrl) {
          this.next();
        }
      });
    });
    obs.observe(this.$refs.infinitescroll);
  },
  next() {
    this.currentUrl = this.nextUrl;
    this.fetchList();
  },
},
mounted() {
  this.autoScroll();
},

 

 

참조

https://heropy.blog/2019/10/27/intersection-observer/

Intersection Observer - 요소의 가시성 관찰