vue-touchを使用してVue.jsにスワイプなどのタッチジェスチャーを実装する

vue-touchとは

vue-touchとはHammer.jsをラップしたVue.js用のライブラリです。

Hammer.jsとは、スワイプ(フリック?)・ピンチ・ダブルタップといった、スマホでよくあるイベントのハンドリングを可能にするライブラリですが、vue-touchによってVue.jsでもこれらのことが可能になります。

※Vue.js2.0を前提としています。Vue.js1.0の場合は、こちらを参照ください。
※Vue.js2.0対応のバージョンはβ版です。

インストール方法

npm install vue-touch@next --save

使用例

スワイプイベントを補足し、ブラウザバックするサンプルを作ってみました。

vue-touch有効化

app.jsにて、下記を追記

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

スワイプイベントのハンドラを設定

[ここからスワイプ]の箇所を右にスワイプするとonSwipeRightメソッドが呼ばれ、ブラウザバックします。

<style>
</style>

<template>
    <v-touch v-on:swiperight="onSwipeRight">
        ここからスワイプ
    </v-touch>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods:{
            onSwipeRight: function(){
                history.back();
            }
        },
    }
</script>

注意点

v-touchタグで囲った要素は、イベントをハンドルするために、スクロールができなくなってしまいます(全方向に)。 例えば、上記のサンプルでは、[ここからスワイプ]の箇所を下にスワイプしても反応しません。

その場合は、下記のように、ハンドルする方向を指定します。そうすると、指定した方向以外のスクロールが可能になります。 ちなみにthresholdとはどの程度の距離のスワイプであればイベントとして認識するかをあらわしたものです。thresholdを 200にするとスワイプを認識するためには、より長い距離のスワイプが必要となります。

<v-touch 
    v-on:swiperight="onSwipeRight" 
    v-bind:swipe-options="{ direction: 'right', threshold: 70 }">
    ここからスワイプ
</v-touch>

まとめ

最近はスマートフォン用のWebアプリケーションを作る機会が多くなっていると思いますが、vue-touchを使うとスマートフォン用のイベントハンドリングが簡単に実装できます。 ぜひ使用してみてください。


おすすめ記事
© 2016-2017 Fridles All Rights Reserved.