Vue Swipe Tabs 구현

탭을 스와이프해서 넘기는 것을 구현하고자 한다.

vuetify 라이브러리를 사용 할수도 있지만 세부 커스터 마이징이 어려워서 라이브러리를 쓰진 않았다.

 

HTML

<!-- TAB content -->
<div v-on="pointer
?{pointerdown: ($event)=>start($event), pointermove: ($event)=>move($event), pointerup: ($event)=>end($event)}
:{touchstart: ($event)=>start($event), touchmove: ($event)=>move($event), touchend: ($event)=>end($event)}"
style="touch-action: pan-y;"
>
  <transition :name="transition" v-for="(tab, idx) in tabs" :key="idx">
  	<div v-if="idx === activetab">

- 이벤트 캐치할 div

- 탭의 개수만큼 Transition 생성

- 선택된 탭만 보이도록 하위 div에서 v-if 조건으로 설정한다.

 

 

JS

/* TAB 관련 Method */
    switchtab (n) {
      if (this.activetab > n) {
        this.transition = 'slide-prev'
      } else if (this.activetab < n) {
        this.transition = 'slide-next'
      }
    },
    start (e) {
      this.settouchpos(e, 'start')
    },
    move (e) {
      this.settouchpos(e, 'move')
    },
    end (e) {
      this.settouchpos(e, 'end')
      let dx = this.touch.sx - this.touch.ex,
        dy = this.touch.sy - this.touch.ey,
        dt = this.touch.et - this.touch.st,
        dir = Math.sign(dx),
        ntab = this.activetab + dir,
        vmove = Math.abs(dx) / Math.abs(dy) < Math.sqrt(4)
      ntab = ntab >= 0 && ntab < this.tabs.length ? ntab : null
      if (Math.abs(dx) > 10 && ntab !== null && !vmove && dt < 300) this.switchtab(ntab)
    },
    settouchpos (e, event) {
      let ev = e.changedTouches ? e.changedTouches[0] : e
      if (event === 'start') {
        this.touch.sx = ev.clientX
        this.touch.sy = ev.clientY
        this.touch.st = Date.now()
      } else {
        this.touch.ex = ev.clientX
        this.touch.ey = ev.clientY
        this.touch.et = Date.now()
      }
    }
  

 

- Switchtab : 탭 변경함수

- Start : 터치 시작

- Move : 터치 이동

- End : 터치 끝 ( 스와이프 방향에 따라 switchtab 함수 호출)

- Settouchpos : start, end 좌표를 기록하는 함수

 

 

CSS

.slide-next-leave-active, .slide-next-enter-active, .slide-prev-enter-active, .slide-prev-leave-active {
  transition: .3s;
}
.slide-next-enter,.slide-next-leave, .slide-prev-leave-to
{
  transform: translate(100%, 0);
}
.slide-next-leave-to, .slide-prev-enter, .slide-prev-leave {
  transform: translate(-100%, 0);
}

 

- transition : swipe 속도 조절

- transform : 탭나타나고 사라지는 애니메이션 효과

 

 

 

 

 

 

참고

https://dagalti.github.io/vue-tabs.html

Vue Swipe Tabs