使用滑动菜单和导航器的Onsen-UI
好的,问题是我有一个页面工作滑动菜单。 现在我的一个网页上有一个名单。 通过点击ons-list-item我想用后退button导航到一个新的页面。 我到处search,但没有find适当的解决我的问题。 这是我的代码。
<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>
您可以使用<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无论如何,这样做,你应该照顾的页面堆栈。 如果您推送一个页面,但是您使用菜单而不是后退button“返回”,则创build的页面将保留在堆栈中。
如果你有兴趣,在温泉用户界面的博客,你有一个教程,许多ons元素以类似的方式组合。 希望能帮助到你!