Posted at

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