Vueでスマホのスワイプ操作【vue-touch】

vue.jsを使っていて、スワイプ操作した時の処理ってどう書くんだろうと思い調べてみたら、 バッチリなライブラリがありました。

github.com

Readmeを読んでみると、どうやら Hammer.jsのwrapperらしい。

とりあえずインストール

npm install vue-touch@next

で、main.js、要はnew Vue書いてる上辺りとかに

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

これで準備OK

<template>
    <v-touch
      v-on:swiperight="swipeRight"
      v-on:swipeleft="swipeLeft"
      :swipe-options="{direction:'horizontal'}"
    >
        //スワイプさせたいコンテンツ
    </v-touch>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods:{
            swipeRight(){
                console.log('右にスワイプしたよ')
            },
            swipeLeft(){
                console.log('左にスワイプしたよ')
            }
        },
    }
</script>

これだけでスワイプ時の処理が実装できました。 ちなみに

:swipe-options="{direction:'horizontal'}"

と指定したのは、v-touchで囲ったことによって縦方向のスクロール操作ができなくなってしまったからです。

縦方向というか、基本全方向のスクロール操作が効かなくなるっぽいですね。

directionを指定してスワイプ操作を有効にする方向を決めてあげると、それ以外の方向のスクロールが有効になりました。
（今回だとhorizontalを指定してるので水平方向のみ有効）

vue-touchを簡単に紹介しました。 めっちゃ便利やなこれ。