monacaでの画面遷移

現在、画面遷移の練習をしています。
list.html画面とdetail.html画面を作りました。
list.htmlからdetail.htmlに画面遷移をするようにしたいのですが、出来ません。

自分で調べていると、<ons-template id="detail.html">　ここの設置場所が違うのかなぁと思っています。

画面遷移をさせるやり方がわかる方回答よろしくお願いします。

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: gap: https://ssl.gstatic.com; 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 page="list.html" var="app.navi">
23  
24  <ons-template id="list.html">
25      <!-- list.htmlの内容 -->
26      <ons-page id="list-page">
27          <ons-toolbar>
28              <div class="center">
29                   HOOK
30              </div>
31          </ons-toolbar>
32          
33          <ons-list>
34              <ons-list-item modifier="chevron" class="item">
35              <ons-row>
36                  <ons-col width="60px">
37                  <div class="item-thum"></div>
38                  </ons-col>
39                  <ons-col>
40                      <header>
41                          <span class="item-title">item title</span>
42                          <span class="item-label">4h</span>
43                      </header>
44                      <p class="item-desc">lorem ipusum</p>
45                  </ons-col>
46              </ons-row>
47                  
48              </ons-list-item>
49          </ons-list>
50      </ons-page>
51  </ons-template>
52  </ons-navigator>
53  
54
55      <ons-template id="detail.html">
56  <!-- detail.htmlの内容 -->
57      <ons-page id="detail-page">
58          <ons-toolbar>
59              <div class="left">
60                <ons-back-button>BACK</ons-back-button>> 
61              </div>
62              <div class="center">
63                  Details
64              </div>
65          </ons-toolbar>
66          
67          <ons-list modifier="inset" style="margin-top: 10px;">
68          <ons-list-item class="item">
69              <ons-row>
70                  <ons-col width="60px">
71                      <div class="item-thum">
72                      </div>
73                  </ons-col>
74                  <ons-col>
75                      <header>
76                          <span class="item-title">TITLE</span>
77                          <span class="item-label">FOOBAR</span>
78                      </header>
79                      <p class="item-desc">DESC</p>
80                  </ons-col>
81              </ons-row>>
82          </ons-list-item>>
83      </ons-page>
84  </ons-template>
85
86 
87  
88</body>
89</html>
90
91

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

回答1件

ベストアンサー

パッと見、遷移する挙動がどこにも入っていないようですが・・・
そもそもどこをタップすれば、detailに遷移するのでしょうか。
（静止画を見て、全く動画が再生されないのですが・・・というような状況です）

①ナビゲーターにidを付けてください。
②タップするところを宣言してください
③タップされたことをイベントリスナーで検知してください
④でタップが検知されたら次のdetailページにpushPage遷移してください。

<ons-template id="detail.html">　などを宣言しただけでは遷移しません。
あくまでも、その名前のページを作ったにすぎません。

こちらのソースコードをそのまま使えば良いと思います。
Onsen UI ページナビゲーション

投稿2017/12/02 04:46

編集2017/12/02 04:52

Clavat

総合スコア92

TaisukeShimane

2017/12/03 06:16

回答ありがとうございます。添付してくださった内容を元に勉強していますが、なかなかうまくいきません。もしよろしければ、訂正したコード載せていただけないでしょうか？

Clavat

2017/12/04 00:08 編集

>勉強していますが、なかなかうまくいきません。 >訂正したコード載せていただけないでしょうか? 他の質問・回答もそうですが、人に任せるのではなく、勉強された内容（反映されたコード）を載せられるべきです。 ①②③④のどこがわからないのか、最初のコードから何を変えたのか・・・。上記のリンク先にサンプル（再生ボタン押すと動きます）があり、そこに該当する全てのコードが記載されています。 1行1行、何をやっているか、変えたら何が変わるのか、まずはサンプルを理解されることをお勧めします。それでもダメであれば、MonacaやOnsen UI以前の HTML、CSS、JavaScriptの基礎的な知識が必要かと思います。 Monacaのマニュアル、公式本もありますし。

TaisukeShimane

2017/12/04 08:49

すいません。正直申し上げますと、初心者すぎて①〜④の回答の意味が全くわからないのです。 ①の回答で言えば、指摘されてるナビゲーターがわかりませんし、②で言えば、どこに宣言すれば良いのかがわかりません。③④なんてどこをいじれば良いのか全くわからないのです。すいません。もちろん公式の本を読んでから質問しているのですが、初心者なのでお許しください...

Clavat

2017/12/04 10:05 編集

おっと、そういうことですか。以前に別の質問に回答した記憶があるのですが、Monacaでのアプリ開発は HTML,CSS,JavaScriptの基本知識が【前提条件】【必須】です。ホームページ等を作成された経験がないと、正直アプリから始めるのはキツイと思います。もしホームページを作成された経験があるのでしたら、初回に記載されたコードにlist⇒detailに移動する「リンク設定」も「移動ボタン」もないことは理解できるかと思います。 ※detailに戻るボタンだけありますが、そもそもlistからいけない。さらにリンクやボタンを設置しても次に「JavaScript」でボタンやリンクがタップされたら・・・というプログラミングが必要です。躓いている、理解が出来ないとおっしゃる理由は、キツイ言い方かもしれませんが、【Monaca】や【Onsen UI】以前の、前提条件にあるかもしれません。 CSSは後回しで良いので、HTMLやJavaScriptは Monacaでなくても初心者向けのサンプルコードをまずは1行ずつ読んで理解する、次は自分の思うものを書いてみる　というステップは、ここにいる皆さん歩まれていると思います。

TaisukeShimane

2017/12/04 10:52

大変参考になりました！ありがとうございます(^^) 一応HTMLやCSSは独学で勉強したのですが、浅い理解なんだと思います。また勉強します！ありがとうございました(^^)

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