OnsenUIのhammer.jsでつまずいた

OnsenUIでhammer.js使ってて、少し手こずったので覚え書き。

右にスワイプして前の画面に戻るといったことをしたくて、ons-gesture-detectorを使いました。(下記URL参照)

http://ja.onsen.io/guide/components.html#ons-gesture-detector

http://ja.onsen.io/guide/overview.html#DetectingFingerGestures

ページのどの部分でスワイプしても反応してほしかったので、以下のように書きました。

<ons-gesture-detector ng-swiperight="ons.navigator.popPage()">
  <ons-page ng-controller="hogeController">
    <ons-toolbar>
      …
    </ons-toolbar>
  </ons-page>
<ons-gesture-detector>

 ここからが本題。

これでうまく動くかと思いきや、完全にはうまくいかなかった。

手元のiOSではうまく動くものの、Android端末ではかなりスワイプの判定がシビアで、最初の方はAndroidでは動いていないと錯覚するほどでした。

対処方法は簡単で、コントローラー部(hogeController)に以下のコードを追記するだけ。

.controller('hogeController', function($scope) {
  Hammer.gestures.Swipe.defaults.swipeVelocityX = 0.1;
  …
});

これは検出するスワイプの速さの設定です。

Swipe recognizer - Hammer.js

にHammer.jsのスワイプに関する内容が書かれています。

デフォルト値では

VelocityX = 0.65 //OnsenUIでは0.6

となっています。

0.1に下げることで、比較的ゆっくりなスワイプにも反応してくれるようになりました。

また、これを設定することでiOS側の感度が高くなりすぎるといったこともなかったので、ひとまず問題はなさそうです。

今日の進捗終わり…