28050


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

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

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

index.html

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2016-07-29T13:14:13.983
27947
2016-08-15T03:30:26.677
17329
question
monaca onsen-ui
monacaでスワイプ操作ができません


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

[code]

    <div class="center">Page 1 Page 1 Page 1 Page 1 Page 1 Page 1</div>
    
[/code]

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

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

[code]

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

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

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


CC BY-SA 3.0
2016-08-03T12:00:33.907
28050
2016-08-15T03:30:26.677
2016-08-15T03:30:26.677
8848
8848
27947
answer