[nuxt] fullpage 라이브러리 구현 02

코드 전체 보기
: https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue

마우스 휠 이벤트

먼저 마우스 휠 이벤트를 셋팅 한 후에, 마우스 드래그와 터치 이벤트까지 적용시켜 줄 것이다.

 

data 변수

- pageIndex

: 현재 보여지는 페이지의 index를 담아 활용할 것이다.

- nowMoving

: 페이지가 움직이는 동안에 이벤트가 중복되지 않도록 도와줄 변수이다.

 

methods

- catchAction

: wheel, touchmove, mousemove 등의 이벤트 리스너를 담는 함수이다.

- wheelEvent

: 마우스 휠 이벤트가 감지됐을 때 실행하는 함수

스크롤을 내일때 e.deltaY 는 100 출력, 올릴 때 -100 출력.

스크롤 up/down을 e.deltaY>0 의 true, false로 구분하면 된다

 

- getPageIndex

: 위에 data에서 선언한 pageIndex를 가공하는 함수이다. 

스크롤 다운 시,  section의 갯수보다 커지지 않도록

스크롤 업 시, 0 이하의 음수로 빠지지 않도록 조건문을 걸어주었다.

 

- moveEvent

: 페이지 이동을 실행하는 함수

transform 을 이용하여 translateY값을 조정해준다.

 

nowMoving은 함수가 실행하자마자 true가 되고, moveEvent함수에서 페이지 이동이 끝난 후에 false로 바꿔준다.

그리고 스크롤 업/다운을 구분하는 이벤트에서는  nowMoving가  false일 때 return하도록 셋팅했다.

이로써 페이지가 이벤트를 감지하여 함수가 실행되는 중에는 이벤트가 중복되지 않도록 해준다.

<script>
export default {
  data() {
    return {
      page: null,
      pageIndex: 0,
      nowMoving: false
    }
  },
   mounted() {
    this.page = this.$el.querySelectorAll('.section');
    this.catchAction()
  },
  methods:{
    catchAction(){
    //eventListener 모을 함수
      window.addEventListener('wheel', this.wheelEvent);
    },
    wheelEvent(e){
      // 마우스 휠 이벤트
      if(this.nowMoving) return
      this.nowMoving = true;
      
      // e.deltaY > 0 ---> 스크롤 내릴 때 true 올릴 때 false
      let scrollDown = e.deltaY > 0;
      this.getPageIndex(scrollDown)
    },
    getPageIndex(down){
    	// 현재 페이지 인덱스 구하는 함수
        if(down){
          this.pageIndex == (this.page.length-1) 
          ? this.pageIndex = (this.page.length-1) 
          : ++this.pageIndex
        } else{
          this.pageIndex <= 0 
          ? this.pageIndex = 0 
          : --this.pageIndex
        }
        this.moveEvent(this.pageIndex);
    },
    moveEvent(number){
      this.$el.querySelector('.section-container').style.transform
      = `translateY(-${number}00%)`;
      setTimeout(() => {
        // .section-wrapper의 transition 시간 정도
        this.nowMoving = false;
      }, 400);
    }
  }
}
</script>

 

함수를 구분한 이유 

1. 터치 이벤트에서도 위/아래 방향을 감지한 후 같은  내용의 코드를 돌려야 하기 때문에  파라미터로 down방향의 true/false를 넘겨주도록 셋팅했다.

2. 페이지네이션 클릭 시 페이지 이동 이벤트를 실행할 예정이라 움직이는 이벤트 함수를 구분해줬다.