温泉的UI使用滑动菜单导航带 [英] Onsen-UI using sliding menu with navigator

问题描述

好吧，问题是我有页的工作滑动菜单。现在我的页面之一，有一个插件列表。通过点击插件列表项我想导航到后退按钮了新的一页。我已经到处找，但没有找到我的问题的妥善解决。这里是我的code。

 ＆LT;附件滑动菜单
  菜单页=menu.html主页=/home.html的一面=左
  VAR =菜单式=兜底最大滑动距离=260px可滑动=真＆GT;
＆LT; / ONS-滑动菜单＆gt;＆LT; ONS-模板ID =menu.html＆GT;
  ＆LT;附件页的修改=菜单页的＆GT;
    ＆LT; ONS-工具栏修改=透明＆GT;＆LT; / ONS-工具栏＆GT;    ＆LT; ONS-list类=菜单列表＆GT;
      ＆LT;附件列表项类=菜单项目NG点击=menu.setMainPage（'home.html做为'，{closeMenu：真}）＆GT;
        ＆LT;附件图标图标=FA-加上＆GT;＆LT; /附件图标＆GT;
        家
      ＆LT; /附件清单项目＆GT;      ＆LT;附件列表项类=菜单项目NG点击=menu.setMainPage（'browsehotels.html'，{closeMenu：真}）＆GT;
        ＆LT;附件图标图标=FA-书签＆GT;＆LT; /附件图标＆GT;
        浏览酒店
      ＆LT; /附件清单项目＆GT;    ＆LT;附件列表项类=菜单项目NG点击=menu.setMainPage（'specialoffers.html'，{closeMenu：真}）＆GT;
        ＆LT;附件图标图标=FA-书签＆GT;＆LT; /附件图标＆GT;
        特别优惠＆LT; D​​IV CLASS =通知菜单通知＆GT;第3版; / DIV＆GT;
      ＆LT; /附件清单项目＆GT;      ＆LT;附件列表项类=菜单项目NG点击=menu.setMainPage（'hoteldetails.html'，{closeMenu：真}）＆GT;
        ＆LT;附件图标图标=FA-书签＆GT;＆LT; /附件图标＆GT;
        博客
      ＆LT; /附件清单项目＆GT;      ＆LT;附件列表项类=菜单项目NG点击=menu.setMainPage（'hoteldetails.html'，{closeMenu：真}）＆GT;
        ＆LT;附件图标图标=FA-书签＆GT;＆LT; /附件图标＆GT;
        预订
      ＆LT; /附件清单项目＆GT;      ＆LT;附件列表项类=菜单项目NG点击=menu.setMainPage（'hoteldetails.html'，{closeMenu：真}）＆GT;
        ＆LT;附件图标图标=FA-书签＆GT;＆LT; /附件图标＆GT;
        联系我们
      ＆LT; /附件清单项目＆GT;    ＆LT; / ONS-列表＆gt;  ＆LT; /附件页＆GT;
＆LT; /插件模板＆GT;＆LT; ONS-模板ID =/home.html的＆GT;
  ＆LT;附件页NG控制器=HomeController的＆GT;
    ＆LT; ONS-工具栏＆GT;
      ＆LT; D​​IV CLASS =左＆GT;
        ＆LT; ONS-工具栏按钮NG点击=menu.toggle（）＆GT;
          ＆LT;附件图标图标=离子navicon大小=28px固定宽度=false的＆GT;＆LT; /附件图标＆GT;
        ＆LT; / ONS-工具栏按钮＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =中心＆GT;有的应用与滑动菜单＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =右＆GT;
        ＆LT; ONS-工具栏按钮＆GT;
            ＆LT;附件图标图标=刷新大小=30像素旋转={{isFetching}}固定宽度=真正的＆GT;＆LT; /附件图标＆GT;
        ＆LT; / ONS-工具栏按钮＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / ONS-工具栏＆GT;    ＆LT; ONS-列表＆gt;
        ＆LT;附件列表项NG点击=在这里，我要到一个全新的页面＆GT;
             有些列表项
        ＆LT; /附件清单项目＆GT;
    ＆LT; / ONS-列表＆gt;
  ＆LT; /附件页＆GT;
＆LT; /插件模板＆GT;
 

解决方案

您可以使用＆LT; ONS-导航＆GT; 为你的＆LT; ONS-滑动菜单＆gt; ：

 ＆LT; ONS-模板ID =/home.html的＆GT;
  ＆LT; ONS-VAR航海家=myNav＆GT;
  ＆LT;附件页＆GT;
    ＆LT; ONS-工具栏＆GT;
    ...
       ＆LT;附件列表项NG点击=myNav.pushPage（'newpage.html'）＆GT;
    ...
 

在这里工作： HTTP：//$c$cpen.io/frankdiox/pen/qEyvxB
无论如何，这样做，你应该照顾页面堆栈。如果你把一个页面，但你回去使用菜单，而不是后退按钮，创建的页面将保留在堆栈中。

如果你有兴趣，在温泉UI的博客你有的教程，其中许多项元素组合以类似的方式。希望它能帮助！

Ok, The problem is I have a working sliding menu with pages. Now one of my page has an ons-list. By clicking on ons-list-item I want to navigate to a new page with back button. I have searched everywhere but didn't find any proper solution to my problem. Here is my code.

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

解决方案

You can use an <ons-navigator> as a child of your <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')">
    ...

Working here: http://codepen.io/frankdiox/pen/qEyvxB Anyway, doing this you should take care of the page stack. If you push a page but you "go back" using the menu instead of the back-button, the page created will remain in the stack.

In case you are interested, in Onsen UI's blog you have a tutorial where many ons elements are combined in a similar way. Hope it helps!

这篇关于温泉的UI使用滑动菜单导航带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！