在侧面菜单导航上显示后退按钮

时间:2015-12-30 23:26:29

标签: ionic

我有一个带侧边菜单的简单应用程序,您可以在其中导航到不同的视图。如果我点击一个项目,我会被重定向到该视图,但后退按钮不会显示,这似乎是默认行为。

是否有方法在侧面菜单导航中显示后退按钮?

我在离子论坛上发现了这个代码,它使用与我相同的基本结构:http://codepen.io/mhartington/pen/azwojR

这是我的完整菜单:

<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content id="header-wrapper">
    <div id="logoHeader" class="bar bar-header">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        <img src="img/rg-gunz-christmas.png" />
    </div>
    <ion-nav-bar id="header" class="bar bar-header">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu id="menu" side="left">
    <ion-header-bar class="bar-stable">
        <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
        <div class="account">
            <img ng-src="{{account.AvatarUrl}}" class="avatar"/>
            <div class="username">{{account.UserID}}</div>
        </div>
        <ion-list>
            <ion-item menu-close href="#/app/main">
                <i class="icon ion-home"></i> <span class="padding-left">Home</span>
            </ion-item>
            <ion-item menu-close href="#/app/login" ng-show="!account">
                <i class="icon ion-log-in"></i> <span class="padding-left">Login</span>
            </ion-item>
            <ion-item menu-close href="#/app/register" ng-show="!account">
                <i class="icon ion-person"></i> <span class="padding-left">Register</span>
            </ion-item>
            <ion-item menu-close href="#/app/individualRanking">
                <i class="icon ion-arrow-graph-up-right"></i> <span class="padding-left">Individual ranking</span>
            </ion-item>
            <ion-item menu-close href="#/app/clanRanking">
                <i class="icon ion-ios-bolt"></i> <span class="padding-left">Clan ranking</span>
            </ion-item>
            <ion-item menu-close href="#/app/statistics">
                <i class="icon ion-stats-bars"></i> <span class="padding-left">Statistics</span>
            </ion-item>
            <div class="item item-divider" ng-show="account">
                Account
            </div>
            <ion-item menu-close href="#/app/playlists" ng-show="account">
                <i class="icon ion-settings"></i> <span class="padding-left">Settings</span>
            </ion-item>
            <ion-item menu-close href="#/app/playlists" ng-show="account">
                <i class="icon ion-log-out"></i> <span class="padding-left">Log out</span>
            </ion-item>

        </ion-list>
    </ion-content>
</ion-side-menu>

2 个答案:

答案 0 :(得分:0)

这里很难预测。只是在开放的视图中可能是某些其他视图被覆盖。 我有同样的问题。可能这可以帮助你。

ion-nav-bar放置在特定视图中,您想要显示后退按钮!

<ion-view view-title="Order Details">
    <ion-nav-bar class=" dark">
        <ion-nav-back-button class="button-clear button-dark stable ">
            <i class="ion-arrow-left-c stable"></i>&nbsp;Back
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content class="content-stable"></ion-content>
</ion-view>

答案 1 :(得分:0)

试用此代码:您可以添加此类 ion-ios-arrow-back ion-ios7-arrow-back

<ion-side-menu-content >
    <ion-nav-bar class="bar-energized nav-title-slide-ios7">
        <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="link" animation="slide-left-right"></ion-nav-view>  
</ion-side-menu-content>