Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
107
Help us understand the problem. What is going on with this article?
@kira_puka

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

More than 1 year has passed since last update.

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

107
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kira_puka
フリーのエンジニア / 今はNuxt.jsが多め / いつかFlutterをやりたい 受託開発をしながら、アプリ・Webサービス・ゲームを個人開発 Kotlin/Python/Swift/Unity/Java/Haskell/DDD
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
107
Help us understand the problem. What is going on with this article?