Question

好的，问题是我有一个带页面的工作滑动菜单。现在我的一个页面有一个ons-list。通过单击ons-list-item，我想导航到带有后退按钮的新页面。我到处搜索，但没有找到任何适当的解决方案来解决我的问题。这是我的代码。

<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" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
        <ons-icon icon="fa-plus"></ons-icon>
        Home
      </ons-list-item>

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Browse Hotels
      </ons-list-item>

    <ons-list-item class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Special Offers <div class="notification menu-notification">3</div>
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Blog
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Bookings
      </ons-list-item>        

      <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})">
        <ons-icon icon="fa-bookmark"></ons-icon>
        Contact Us
      </ons-list-item>        

    </ons-list>

  </ons-page>
</ons-template>

<ons-template id="home.html">
  <ons-page ng-controller="homeController">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Some App with sliding menu</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <ons-list>
        <ons-list-item ng-click="Here I want to go to a whole new page">
             Some list item
        </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

Answer 1

您可以使用<ons-navigator>作为<ons-sliding-menu>的孩子：

<ons-template id="home.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
    ...
       <ons-list-item ng-click="myNav.pushPage('newpage.html')">
    ...

在此工作：http://codepen.io/frankdiox/pen/qEyvxB 无论如何，这样做你应该照顾页面堆栈。如果您推送页面但使用菜单而不是后退按钮“返回”，则创建的页面将保留在堆栈中。

如果您感兴趣，可以在Onsen UI's blog中找到一个教程，其中许多ons元素以类似的方式组合在一起。希望它有所帮助！

Onsen-UI使用滑动菜单和导航器

1 个答案: