OnsenUI + Vueでジェスチャーを検知

Created 2018年12月9日17:44
Updated 2018年12月20日13:41
Categories vue OnsenUI

公式ドキュメントに実行例が載っておらずちょっとハマったので補足です。

IDがhogehogeの要素を上にスワイプした際にイベントを発生させたい時は、次のように実装します。

import VueOnsen from 'vue-onsenui'

export default {
  ...,
  mounted () {
    var testGesture = VueOnsen.GestureDetector(document.getElementById('hogehoge'))
    testGesture.on('swipeup', this.testFunc)
  },
  methods: {
    testFunc (event) {
      console.log('Show Now Playing!!!')
    }
  }
}

今回の場合このリポジトリからのフォークなので、VueOnsenをimportする事で使えましたが、他の環境なら普通に$onsから使えるかもしれません。

インスタンス時にgetElementByIDなどを使ってDOM要素のオブジェクトを渡してあげるのがポイントです(ちょっとダサい気もする)。

コメントを投稿

コメント