Q&A
###前提・実現したいこと
Monacaでアプリ開発をしていたのですが、<ons-tabbar>のページ内に、pushPageを実装すると画面遷移ができませんでした。
ons-tabbarの中にあるページの中で画面遷移をする方法のアドバイスをいただけると嬉しいです。
###該当のソースコード
テンプレートの内容を参考にしましたが、<ons-tabbar>を実装したら動作しなくなりました。
//HTML <!DOCTYPE HTML> <html> <head> <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="js/page.js"></script> <script src="lib/onsenui/js/onsenui.min.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"> </head> <body> <ons-navigator id="navigator" page="page1.html"></ons-navigator> <ons-tabbar var="tabbar"> <ons-tab icon="flag" label="page1" page="page1.html"></ons-tab> <ons-tab icon="folder" label="page2" page="page2.html"></ons-tab> </ons-tabbar> </body> </html>
//page1.html <ons-page id="first-page"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <div class="content" style="text-align: center"> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </div> </ons-page>
//JS // Page init event document.addEventListener('init', function(event) { var page = event.target; if (page.matches('#first-page')) { page.querySelector('#push-button').onclick = function() { document.querySelector('#navigator').pushPage('poppage.html'); }; } else if (page.matches('#pop-page')) { page.querySelector('#pop-button').onclick = function() { document.querySelector('#navigator').popPage(); }; } });
###試したこと
Javascriptの動作状況を確認したところ通常通り読み込めていました。
###補足情報(言語/FW/ツール等のバージョンなど)
OnsenUI 2を使用
回答2件
0
ベストアンサー
おそらくスコープ内にnavigatorが見つからないのではないかと思います。
ons-navigatorがindex.htmlで定義されており、page.jsもindex.htmlで読み込まれているので、page1.htmlのスコープ内からはdocument.querySelector('#navigator')が参照できていないのではないかと思います。
こちらの「要素を理解する」で行われているように、グローバル変数にons-navigatorを格納して、以降はそのグローバル変数を使って処理を行うのが良いのではないかと思います。
page.jsでは↓以下
JavaScript
1var myNavigator = document.querySelector("#my-navigator");
のように記述しておいて、以降はmyNavigatorを用いるようにしてはどうでしょうか。
投稿2017/04/18 09:32
総合スコア1947
0
https://docs.monaca.io/ja/sampleapp/samples/onsen_ui_tabbar_navigator/
のサンプルが参考になると思いますが、
index.html(一部抜粋)
index.html(一部抜粋)
1<body> 2 <ons-tabbar> 3 <ons-tab 4 icon="flag" 5 label="page1" 6 page="navigator.html" 7 active></ons-tab> 8 <ons-tab 9 icon="folder" 10 label="page2" 11 page="page2.html"></ons-tab> 12 </ons-tabbar> 13</body>
(やったことは、<ons-navigator id="navigator" page="page1.html"></ons-navigator>を消す＆
page1.htmlではなくnavigator.htmlをpageに指定する)
navigator.html
navigator.html
1<ons-navigator id="navigator" page="page1.html"> 2</ons-navigator>
(ファイルを追加する)
で、出来るのではないかと思います。
投稿2017/04/18 09:20
総合スコア5545
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。