みんなの「作ってみた」

Nuxt.js/Vue.jsでもスワイプでページ移動したい

2019/09/15

kira_puka
kira_puka
フリーのエンジニア / 今はNuxt.jsが多め / いつかFlutterをやりたい 受託開発をしながら、アプリ・Webサービス・ゲームを個人開発 Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Nuxt.jsで開発しているけど、スワイプで画面遷移とかしたいなと思い、
いろいろ調べたときの備忘録。

vue-touch-eventsというのが良さそう(´ω`)
hammer.jsというライブラリのラッパーらしい。

hammer.jsではスワイプだけでなく、
Pan / Pinch / Press / Rotate / Tapも検知できるよう。すごい。。

インストール

$ npm i -S vue2-touch-events

pluginの作成

~/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>

作ってるサービスではこんな感じに

開発しているWebサービスではこんな感じに♪
サクッと導入できて便利でした(´ω`)

こんなのつくってます!!

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで