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

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)まで

Originally published at qiita.com

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント