Onsen-ui - back to home

匿名 (未验证) 提交于 2019-12-03 01:34:02

问题:

I want to go back home from page4.html without using the menu, but I get this error

Error: You can not supply no "ons-page" element to "ons-navigator

This is my code:

<!DOCTYPE html> <html>  <head>    <meta charset="UTF-8">   <title>Sliding Menu</title>    <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css'>   <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css'>  </head>  <body onload="_l='t';">  <ons-sliding-menu   menu-page="menu.html" main-page="home.html" side="left"   var="menu" type="reveal" max-slide-distance="260px" swipable="true"> </ons-sliding-menu>  <ons-template id="menu.html">   <ons-page modifier="menu-page">     <ons-toolbar modifier="transparent"></ons-toolbar>      <ons-list class="menu-list">       <ons-list-item class="menu-item" onclick="menu.setMainPage('home.html', {closeMenu: true})">         <ons-icon icon="fa-plus"></ons-icon>         Home       </ons-list-item>            </ons-list>    </ons-page> </ons-template>    <ons-template id="home.html">   <ons-navigator var="myNav">   <ons-page>     <ons-toolbar>       <div class="left">         <ons-toolbar-button onclick="menu.toggle()">           <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>         </ons-toolbar-button>       </div>       <div class="center">Home</div>     </ons-toolbar>      <ons-list>         <ons-list-item onclick="myNav.pushPage('page1.html')">              go to page 1         </ons-list-item>          <ons-list-item onclick="myNav.pushPage('page2.html')">              go to page 2         </ons-list-item>     </ons-list>   </ons-page>   </ons-navigator> </ons-template>  <ons-template id="page1.html">   <ons-page>     <ons-toolbar>       <div class="left">         <ons-toolbar-button onclick="menu.toggle()">           <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>         </ons-toolbar-button>       </div>       <div class="center">Page1</div>     </ons-toolbar>         <ons-list>          <ons-list-item onclick="myNav.pushPage('page3.html')">              Page3         </ons-list-item>     </ons-list>   </ons-page> </ons-template>  <ons-template id="page2.html">   <ons-page>      <ons-toolbar>         <div class="left">         <ons-toolbar-button onclick="menu.toggle()">           <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>         </ons-toolbar-button>       </div>         <div class="center">Page2</div>       </ons-toolbar>       <ons-list>         <ons-list-item onclick="myNav.popPage();">              back to Home         </ons-list-item>      </ons-list>   </ons-page> </ons-template>  <ons-template id="page3.html">   <ons-page>      <ons-toolbar>         <div class="left">         <ons-toolbar-button onclick="menu.toggle()">           <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>         </ons-toolbar-button>       </div>         <div class="center">Page3</div>       </ons-toolbar>       <ons-list>         <ons-list-item onclick="myNav.pushPage('page4.html');">              go to page 4         </ons-list-item>     </ons-list>   </ons-page> </ons-template>  <ons-template id="page4.html">   <ons-page>      <ons-toolbar>         <div class="left">         <ons-toolbar-button onclick="menu.toggle()">           <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>         </ons-toolbar-button>       </div>         <div class="center">Page4</div>       </ons-toolbar>       <ons-list>         <ons-list-item onclick="myNav.pushPage('home.html');">              back to Home         </ons-list-item>     </ons-list>   </ons-page> </ons-template>       <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js'></script>   <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js'></script>    <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>    <script>     ons.bootstrap();   </script>  </body>  </html>

You can try on codepen http://codepen.io/marcocalta/pen/azeozL Thank you!

回答1:

The reason why it doesn't work is that you're using resetToPage() to go to home.html which isn't an <ons-page> element.

One way to solve it would be to pull out the <ons-page> element from the navigator and put it in a template. If you name it page0.html you can do resetToPage('page0.html').

I've updated your Codepen: http://codepen.io/argelius/pen/XJvWGL



转载请标明出处:Onsen-ui - back to home
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!