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

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

pagination에 click이벤트 적용시키기

@click으로 이벤트를 바인딩 해준다. 인자로 pagination의 index를 넘겨 같은 index의 페이지로 넘어가도록 한다.

moveEnet 에 pagination index를 pageIndex에 적용해주는 코드 추가.

그래야 이동 후 휠, 드래그 등에서 에러가 발생하지 않는다.

<template>
  <div class="pagination-wrapper">
  	<div class="pagination" :class="{'active': pageIndex == index}" @click="moveEvent(index)" v-for="(n, index) in page" :key="'pagination' + index"></div>
  </div>
</template>

<script>
  methods:{
    moveEvent(number){
      this.pageIndex = number; // pagination click시 pageIndex에도 적용
      .
      .
      .
    }
  }
</script>

 

마우스 드래그 / 터치 이벤트

이 두 이벤트는 사용하는 함수가 같다. 

아래 사이트에서 긁어온 후 조금 수정한 거라 이해하기에는 원 블로그가 편할 듯 하다.

참고 블로그
: marshall-ku.com/web/tips/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%99%80%EC%9D%B4%ED%94%84-%EB%B0%A9%ED%96%A5-%EC%95%8C%EC%95%84%EB%82%B4%EA%B8%B0

 

터치, 드래그의 경우에는 두가지 함수가 필요하다

 

1. 터치/마우스의 시작 위치 구하는 함수

2. 터치 후 스와이프/마우스 드래그 시 시작 위치와 비교하여 방향을 알아내는 함수

 

터치/드래그 함수에서는 touchDown에 down이 true인지 false인지 담아 다음 함수를 호출하도록 했다.

<script>
export default {
 data() {
    return {
      .
      .
      .
      initialX: null,
      initialY: null,
    }
  },
  methods:{
     catchAction(){
      window.addEventListener('wheel', this.wheelEvent);
      
      // 추가
      window.addEventListener('touchstart', this.touchEventInit);
      window.addEventListener('touchmove', this.touchEvent);
      window.addEventListener("mousedown", (e) => {
        this.touchEventInit(e),
        window.addEventListener("mousemove", this.touchEvent)
      });
      window.addEventListener("mouseup", () => {
        window.removeEventListener("mousemove", this.touchEvent);
      });
    },
    touchEventInit(e){
        // 터치 시작 위치
        this.initialX = `${e.touches ? e.touches[0].clientX : e.clientX}`;
        this.initialY = `${e.touches ? e.touches[0].clientY : e.clientY}`;
      },
    touchEvent(e){
        // 터치, 마우스 드래그 이벤트
        if(this.nowMoving) return
        this.nowMoving = true;

        const currentX = `${e.touches ? e.touches[0].clientX : e.clientX}`,
              currentY = `${e.touches ? e.touches[0].clientY : e.clientY}`;

        let diffX = this.initialX - currentX,
            diffY = this.initialY - currentY,
            touchDown = null;

        if( Math.abs(diffX) < Math.abs(diffY)){
          touchDown = (0 < diffY ? true : false)
        }

        this.getPageIndex(touchDown)
      },
    }
  }
</script>

 

이렇게까지 셋팅해 놓으면 마우스 휠, 스와이핑, 드래그, pagination까지의 기능이 완성됐다!

마지막으로는 destroy에서scroll 이벤트를 지워주자.

<script>
export default {
 data() {
    return {
      .
      .
      .
    }
  },
  methods:{
      .
      .
      .
    },
    destroyed() {
    	window.removeEventListener('wheel', this.wheelEvent);
        window.removeEventListener('touchstart', this.touchEventInit);
        window.removeEventListener('touchmove', this.touchEvent);
        window.removeEventListener('mousedown', this.touchEventInit);
        window.removeEventListener('mousemove', this.touchEvent);
    }

  }
</script>

다음 포스트는 watch를 이용해서 section의