Nuxt.js/Vue.js에서도 스 와이프로 페이지를 이동하고 싶습니다.

Nuxt.js로 개발하고 있지만, 스 와이프로 화면 전환이나 하고 싶다고 생각하고,
여러가지 조사했을 때의 비망록.

vue-touch-events 라고 하는 것이 좋을 것 같아(´ω｀)
hammer.js 라는 라이브러리의 래퍼다.

hammer.js에서는 스 와이프뿐만 아니라,
Pan/Pinch/Press/Rotate/Tap도 감지할 수 있도록. 대단해. .

설치

$ npm i -S vue2-touch-events

플러그인 작성

~/plugins/vue2-touch-events.ts 만들기

import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

nuxt.config.ts 설정

만든 플러그인 설정

const config: NuxtConfiguration = {
  plugins: [
    { src: "~/plugins/vue2-touch-events.ts", ssr: false }
  }
}

사용해보기

<template>
  <div
    v-touch:swipe.left="() => $router.push('left_page')"
    v-touch:swipe.right="() => $router.push('right_page')"
  >
  </div>
</template>

간단(ﾟдﾟ)!
v-touch:swipe.left와 같은 지시문이 제공되므로,
필요한 것을 선택하고 callback 함수를 설정하면 OK.

탭과 같은 다른 것들은 GitHub README를 참조하십시오.

모바일만 스와이프 사용

사용자 에이전트를 보고 활성화/비활성화를 설정합니다.
사용자 에이전트의 판정은, nuxt-user-agent가 편리♪

설정 방법이나 사용법 등은 이전에 쓴 이 기사을 참조하십시오.

nuxt-user-agent와 함께 사용하여 모바일만 스와이프를 활성화하면 이런 느낌.

<template>
  <div
    v-touch:swipe.left="() => { if(!$ua.isFromPc()) $router.push('left_page') }"
    v-touch:swipe.right="() => { if(!$ua.isFromPc()) $router.push('right_page') }"
  >
  </div>
</template>

만들고 있는 서비스에서는 이런 식으로

개발하고 있다 웹 서비스 에서는 이런 느낌에♪
바삭하게 도입할 수 있어 편리했습니다(´ω｀)

오 스와이프로 페이지 천이 할 수 있었을지도( ﾟдﾟ)!vue2-touch-events 굉장하다...(´ω｀) 피 c. 라고 r. 코 m/ゔぉ↓쿠ぉ미아 — 적독 하우 매치📚 키라 푸카 (@kira_puka) September 15, 2019

랭킹에도 스와이프를 붙여 보았다(´ω｀)

이것으로 스마트폰에서도 스위스를 볼 수 ヽ(=´▽`=)노/p>— 적독 하우매치📚 키라푸카 (@kira_puka) 피 c. 라고 r. m / jL1없이 vFGk

<script async=""src="https://platform.twitter.com/widgets.js"/>

이런것을 만들고 있습니다! !

최근 적독용 독서관리 앱 '적독하우매치' 출시!

September 15, 2019은 Nuxt.js + Firebase에서 개발 중입니다!

적독 하우 매치

만약 좋으면 놀아보세요 ヽ(=´▽`=)노

요망·감상·어드바이스 등 있으면,

공식 계정 () 및 개발자 (@MemoryLoverz)까지