

Monacaを使い始めたばかりの初心者です。

スワイプ操作で上下左右にページ移動するアプリを作りたいのですが、どうすればいいでしょうか？

「Onsen UI最小限のテンプレート」のボタン操作をスワイプに置き換えるような感じです。

アドバイスいただけたら幸いです。


CC BY-SA 3.0
2015-09-24T23:35:15.403
16909
2015-09-28T06:31:05.640
12438
question
monaca
スワイプで上下左右にページ移動するアプリはどう作るのでしょう？


自己解決しました。後続の人のために方法の骨子を書いておきます。

1）index.htmlのbodyタグ内

[code]

    <ons-navigator var="myNavigator" page="page001.html"></ons-navigator>
    
[/code]

２）page001.html

[code]

    <ons-gesture-detector>
        <ons-page >
            <div class="container"></div>
        </ons-page>
    </ons-gesture-detector>
    
[/code]

３）index.htmlの

[code]

    ons.ready(function() {
    
        /* 前ページにスワイプ */
        $(document).on('swiperight', '.container', function(event) { });
    
        /* 次ページにスワイプ */
        $(document).on('swipeleft', '.container', function(event) {
          myNavigator.pushPage( "page002.html" ); 
        }); 
    }
    
[/code]


CC BY-SA 3.0
2015-09-28T06:31:05.640
17020
2015-09-28T06:31:05.640
12441
16909
answer