【Vue.js】vue-touchで簡単スワイプ操作実装！

今回はJavaScriptフレームワーク「Vue.js」のインストール方法と、
vue-touchを使ってスワイプ操作を実装する方法をまとめてみました。
スマホ用サイトの開発で、スワイプ操作の導入を考えている方は是非参考にしてみてください。

Vue.jsの環境構築

Node.jsのインストール

https://nodejs.org/ja/
とりあえず推奨版と書かれていたので、10.13.0LTSの方をインストールしました。

vue-cliでプロジェクトを作成

コマンドプロンプト
// vue-cliのインストール
$ npm install –global vue-cli
//プロジェクトの作成。今回は「my-project」というプロジェクトを作成します。
$ vue init webpack my-project
//作成したプロジェクトに移動
$ cd my-project
//起動させます。
$ npm run dev

その後
http://localhost:8080
にアクセスし
↓の画像と同じ画面が表示されれば成功です！

vue-touchの実装

では、vue-touchを使って、スワイプ操作を実装していきます。

vue-touchのインストール

//コマンドプロンプトにて下記を実行
npm install vue-touch@next –save

vue-touch有効化

main.jsに下記を追加します。

var VueTouch = require(‘vue-touch’)
Vue.use(VueTouch, {name: ‘v-touch’})

スワイプ範囲の指定

vue-touchの使い方は、まず<v-touch>のタグでスワイプ操作を実装させたい部分を指定します。

そして<v-touch>の後に続いて、　　v-on:swiperight=””　　もしくは　　v-on:swipeleft=””

と記述すると、それぞれ右スワイプ、左スワイプの動作が行われたときにメソッドが呼び出されます。
今回は右スワイプでonSwipeRight、左スワイプでonSwipeLeftのメソッドを呼んでいます。

<template>
<v-touch v-on:swiperight=”onSwipeRight” v-on:swipeleft=”onSwipeLeft”>
//この部分をスワイプすると指定のメソッドが呼ばれます
</v-touch>
</template>

スワイプ時の動作を指定

続いて、スワイプ操作を行った後に呼び出されるメソッドを、スクリプト内に書きます。
今回はとりあえずconsole.logを表示させてみます。

<script>
export default {
name: ‘HelloWorld’,
data () {
return {
msg: ‘Welcome to Your Vue.js App’
}
},
methods: {
onSwipeRight () {
console.log(‘右スワイプ’)
},
onSwipeLeft () {
console.log(‘左スワイプ’)
}
}
}
</script>