ons-tabbarを使うとpushPageが機能しなくなる

前提・実現したいこと

https://ja.onsen.io/v2/guide/に出ているpushPageのサンプルに、ons-tabbarを追加したら、pushPageが働かなくなった。ons-tabbarとpushPageは同時に使うためにはどうしたらよいでしょうか

発生している問題・エラーメッセージ

ボタンを押しても画面が変わらない

エラーメッセージ
特になし

該当のソースコード

<!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: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <title>Onsen UI Photo Sharing App</title> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <script> document.addEventListener('init', function(event) { var page = event.target;

if (page.id === 'page1') {
page.querySelector('#push-button').onclick = function() {
document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
};
} else if (page.id === 'page2') {
page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
}
});
</script>

</head> <body> <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> <ons-page> <ons-tabbar id="tabbar"> <ons-tab icon="ion-home" page="page1.html" active> </ons-tab> <ons-tab icon="ion-ios-search" page="page3.html"> </ons-tab> </ons-tabbar> </ons-page> <template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar>

<p>This is the first page.</p>

<ons-button id="push-button">Push page</ons-button>

</ons-page> </template> <template id="page2.html"> <ons-page id="page2"> <ons-toolbar> <div class="left"><ons-back-button>Page 1</ons-back-button></div> <div class="center"></div> </ons-toolbar>

<p>This is the second page.</p>

</ons-page> </template> <template id="page3.html"> <ons-page id="page3"> <ons-toolbar> <div class="left"><ons-back-button>Page 1</ons-back-button></div> <div class="center"></div> </ons-toolbar>

<p>This is the third page.</p>

</ons-page> </template> </body> </html>

試したこと

<ons-tabbar>を含む<ons-page>をコメントにするとpushPageは機能します。

補足情報（FW/ツールのバージョンなど）

monacaで実行しています。

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

回答1件

ベストアンサー

ons-navigatorの中に最初に表示したい内容を書いてあげれば解決しないでしょうか？

<ons-navigator swipeable id="myNavigator" page="page1.html">
  <ons-page>
    <ons-tabbar id="tabbar">
      <ons-tab icon="ion-ios-home" page="page1.html" active>
      </ons-tab>
      <ons-tab icon="ion-ios-search" page="page3.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page> 
</ons-navigator>

もし、常に ons-tabbarを残したい場合には、まず ons-tabbar を書いて、その中のpage1.htmlの中でons-navigatorを呼ぶ形にすればいいかと思います。

以下サンプルです。

https://jsfiddle.net/or3a9fw0/

投稿2020/03/12 07:28