スワイプ操作での画面遷移

###前提・実現したいこと
Monacaでアプリ開発の勉強をしているのですが、OnsenUIのpushpageで画面遷移をした後に、画面を上にスワイプすることでpop-pageができるようにしたいのですが、ons-gesture-detectorの使い方がいまいち分かりません。
できればページごと上にスライドするようにしたいです。
説明が分かりずらくてすいません。

###該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10    <link rel="stylesheet" href="components/loader.css">
11    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13    <link rel="stylesheet" href="css/style.css">
14
15    <script>
16        ons.ready(function() {
17            console.log("Onsen UI is ready!");
18        });
19    </script>
20</head>
21<body>
22<ons-navigator id="navigator" page="tab.html"></ons-navigator>
23
24<ons-template id="tab.html">
25    <ons-tabbar position="auto">
26        <ons-tab 
27            icon="folder"
28            label="Tab 1" 
29            page="tab1.html" 
30            active></ons-tab>
31        <ons-tab
32            icon="folder-open"
33            label="Tab 2" 
34            page="tab2.html"></ons-tab>
35    </ons-tabbar>
36</ons-template>
37
38<ons-template id="tab1.html">
39    <ons-page>
40        <ons-toolbar>
41            <div class="center">page1</div>
42        </ons-toolbar>
43        
44        <p style="text-align: center;">
45            <ons-button
46                onclick="document.querySelector('#navigator').pushPage('page.html')">
47                Push Page
48            </ons-button>
49        </p>
50    </ons-page>
51</ons-template>
52
53<ons-template id="tab2.html">
54    <ons-page>
55        <ons-toolbar>
56            <div class="center">page2</div>
57        </ons-toolbar>
58        
59        <p style="text-align: center;">
60            This is the second page.
61        </p>
62    </ons-page>
63</ons-template>
64  
65<ons-template id="page.html">
66    <ons-page>        
67        <p style="text-align: center;">
68            This is the push page.
69        </p>
70    </ons-page>
71</ons-template>
72</body>
73</html>
74

tab1.htmlからpushpageでpage.htmlへ画面遷移をした後に、page.htmlのページを上にスライド(スワイプ?)してpoppageするような動作にしたいです。

###補足
「ページごと上にスライドする」というのは、iOSでのタスクキルのような動作のことです。

行動規範の内容に同意します

回答1件

ベストアンサー

ons-navigatorを使ったページ遷移の際のアニメーションは "slide、lift、fade、none" の4つでありこの中にページを上に持ち上げる動作がないため、pop-pageで想定される動きをするのは無理だと思います。
なのでカルーセルを使ってページ移動を行ってみてはどうでしょうか？”tab1.html” 内にカルーセルを埋め込み、ポップしたいページ(page.html)内でのみswipeを許可するようにしてやれば、想定される動きになるのではないかと思います。以下サンプルになります。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10    <link rel="stylesheet" href="components/loader.css">
11    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13    <link rel="stylesheet" href="css/style.css">
14
15    <script>
16        ons.ready(function() {
17            console.log("Onsen UI is ready!");
18        });
19    </script>
20</head>
21<body>
22<ons-navigator id="navigator" page="tab.html"></ons-navigator>
23
24<ons-template id="tab.html">
25    <ons-tabbar position="auto">
26        <ons-tab 
27            icon="folder"
28            label="Tab 1" 
29            page="tab1.html" 
30            active></ons-tab>
31        <ons-tab
32            icon="folder-open"
33            label="Tab 2" 
34            page="tab2.html"></ons-tab>
35    </ons-tabbar>
36</ons-template>
37
38<ons-template id="tab1.html">
39    <ons-page id="tab1">
40        <ons-toolbar>
41            <div class="center">page1</div>
42        </ons-toolbar>
43        <ons-carousel initial-index="1" direction="vertical" fullscreen auto-scroll overscrollable id="carousel">
44            <ons-carousel-item style="background-color: #085078;">
45                <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
46                    <p>page</p>
47                </div>
48            </ons-carousel-item>
49            <ons-carousel-item style="background-color: #373B44;">
50                <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
51                    <p>page1</p>
52                    <ons-button id="btn-next-page">Push Page</ons-button>
53                </div>
54            </ons-carousel-item>
55        </ons-carousel>
56    </ons-page>
57</ons-template>
58
59<ons-template id="tab2.html">
60    <ons-page>
61        <ons-toolbar>
62            <div class="center">page2</div>
63        </ons-toolbar>
64
65        <p style="text-align: center;">
66            This is the second page.
67        </p>
68    </ons-page>
69</ons-template>
70
71<script>
72(function(){
73    document.addEventListener("init", function(event){
74        // tab1ページが読み込まれたとき
75        if(event.target.matches("#tab1")){
76            var carousel = document.getElementById("carousel")
77            // "push page" が押された
78            document.getElementById("btn-next-page").addEventListener("click", function(){
79                console.log("get")
80                var options = {
81                    // none or lift
82                    animation: "none",
83                    animationOptions: {duration: 0.5, timing: 'ease-in'}
84                }
85                carousel.setActiveIndex(0, options)
86            })
87            // カルーセルのページが変更された
88            document.addEventListener("postchange", function(event){
89                var carousel = document.getElementById("carousel")
90                // "pgae" が表示されるときswipeableをfalseに
91                if(event.activeIndex===1){
92                    carousel.swipeable = false;
93                // "page1" が表示されるときswipeableをtrueに
94                } else if(event.activeIndex === 0){
95                    carousel.swipeable = true;
96                }
97            })
98        }
99    })
100}())
101</script>
102</body>
103</html>