本文介绍了温泉UI-回到家的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想不使用菜单而从page4.html回到家,但出现此错误

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

这是我的代码:

<!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>

您可以尝试使用Codepen http://codepen.io/marcocalta/pen/azeozL 谢谢!

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

推荐答案

之所以不起作用,是因为您正在使用resetToPage()转到不是<ons-page>元素的home.html.

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.

一种解决方法是从导航器中拉出<ons-page>元素并将其放在模板中.如果将其命名为page0.html,则可以执行resetToPage('page0.html').

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').

我已经更新了您的Codepen: http://codepen.io/argelius/pen/XJvWGL

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

这篇关于温泉UI-回到家的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-13 22:33