0

monacaでアプリを作りたいと思い色々な動作をさせているのですが、スワイプ操作ができません。
コードに何か間違いなどありましたらお教え頂けると助かります。

よろしくお願いいたします。

※ヘッダーとボディを記載するとコードがおかしくなったため省きました

index.html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="components/monaca-jquery/jquery.mobile.js"></script>

<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">

<script>
    ons.ready(function() {
        /* 前ページにスワイプ */
        $(document).on('swiperight', '.center', function(event) { });

        /* 次ページにスワイプ */
        $(document).on('swipeleft', '.center', function(event) {
          mynavigator.pushPage( "page2.html" ); 
        }); 
    });
</script>

<ons-navigator id="mynavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">

    <ons-gesture-detector>
        <ons-page>
            <div class="center">Page 1</div>
            <p>This is the first page.</p>

        </ons-page>
    </ons-gesture-detector>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <p>This is the second page.</p>
  </ons-page>
</ons-template>

1 件の回答 1

0

クラスでcenterを指定しているのが、page1という文字列の箇所なので、page1という文字列の部分だけをスワイプすれば、反応すると思います。ただ、page1が文字列として短いので、うまくスワイプとしてみなされていないのかも知れません。

<div class="center">Page 1 Page 1 Page 1 Page 1 Page 1 Page 1</div>

のように長くして、Page 1 Page 1 Page 1 Page 1 Page 1 Page 1と表示されている部分に指をあててスワイプすれば、スワイプ出来ると思います。

あるいは、center属性をons-pageの方に移して

    <ons-page class="center">
        <div>Page 1</div>
        <p>This is the first page.</p>
    </ons-page>

とすれば、ページ全体が対象となり、スワイプ出来るようになると思います。

捕捉ですが、
1. jquery-mobileは、loader.jsで読み込まれていると思うので、scriptタグで明示的に読み込まなくても大丈夫です。
2. ons.readyでイベント設定する場合、page1はdocument.ready時に存在するので大丈夫ですが、page2以後ではまだDOMがないため反応しません。page2以後でも動作させるためには、initイベントを捕捉して、そのページが構築されてから、ジェスチャーイベントのリスナーを設定する必要があります。 (2016/08/15 追記)=> 正確には、1ページ目でもons.readyイベント時にDOMがない場合もあるので、initイベントを捕捉してページごとに、ジェスチャーイベントを設定した方が良いようです。

2
  • お返事が送れて申し訳ありません。
    – tonpichi
    Commented 2016年8月14日 19:55
  • 大変参考になりました。ご丁寧に補足まで頂いて本当にありがとうございます。
    – tonpichi
    Commented 2016年8月14日 19:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。