我如何推或更换页面内的导航器Onsen UI

How can I push or replace page inside a Navigator Onsen UI?

本文关键字：导航 Onsen UI 何推 换页      更新时间：2023-09-26

我正在开发一个应用程序与cordova + Onsen UI。我想知道如何使用. poppage()方法来导航器内容。这可能吗?我读啊，读啊，读啊，但还是不能完全理解领航员的意思。我尝试将所有内容从导航器中移除并放入一个新页面，然后将主页定义为我创建的新页面。但也没有成功。查看代码:

<ons-template id="home.html" style="background:#fff;">
  <ons-navigator var="myNavigator" title="Navigator">
      <ons-page id="content-home" class="fill">
        <div class="gradient">

那么我如何在导航器内使用推送或替换功能?谢谢你。

管理导航的方法有很多，我将向您展示一个带有ons-button元素的示例，当它被触发时，将一个新页面推送到导航器中:

<ons-button modifier="light" ng-click="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
  Push Page
</ons-button>

您可以在官方文档中找到ons-navigator方法的完整列表。

你还需要区分三个概念:

  • Push page:向栈中添加一个新页面。
  • Pop page:返回堆栈上的前一页，如果推送页面操作尚未发生，则无法触发。
  • Replace page:将当前页面替换为指定页面。

您可以通过查看这个CodePen示例来查看完整的导航示例

EDIT(回答下面的开场白)

我建议您不要在导航器元素中放置页面，而是使用page属性，该属性指定邮件加载的页面。这样，你就可以随心所欲地推送同一个页面。

下面是一个非常简单的例子，其代码是: 
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
  <ons-page>
    <ons-button ng-click="myNavigator.pushPage('page1.html');">Push</ons-button>
  </ons-page>
</ons-template>
相关文章：