페이지 하단에 가면 콘텐츠가 추가되는 처리를 구현해 보았습니다.

2700 단어 Vue.jsnuxt.js
이런 느낌의 거동입니다


먼저 스크롤 값 모니터링
data : function(){
  return{
    scrollY : 0 //スクロール値が保存される
  }
},
mouted : function(){
  window.addEventListener('scroll',this.handleScroll);
},
methods : {
  handleScroll : function(){
    this.scrollY = window.scrollY;
  }
}

스크롤을 감시해 최하부에 왔을 때에 처리를 실행
watch : {
  scrollY : function(){
    let bottom = document.body.scrollHeight - document.body.clientHeight;
    if(bottom <= this.scrollY){
      //最下部に来たときに実行される
      this.getNextContent();
    }
  }
}

좋은 웹페이지 즐겨찾기