首页>Program>source

从一页导航到另一页时,Ionic会自动在导航栏上显示后退按钮.但是,在某些情况下,离子不会显示返回按钮.例如,当您从标签页导航到无标签页时。

如何强制Ionic在特定页面上显示后退按钮?

JavaScript:

.state('app.tab.playlists', { //<!-- Tab content page
  url: '/playlists',
  views: {
    'tab-Content': {
      templateUrl: 'templates/playlists.html',
      controller: 'PlaylistsCtrl'
    }
  }
})
.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
  url: '/singer',
  views: {
    'menuContent': {
      templateUrl: 'templates/singer.html'
    }
  }
})
最新回答
  • 13天前
    1 #

    您可以在控制器中告诉它.试试:

    .controller('yourCtrl', function($scope) {
    $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
      viewData.enableBack = true;
    }); 
    })
    

    但是就像LeftyX所说的.标签到非标签视图的历史记录功能存在问题。

  • 13天前
    2 #

    当您从一个视图导航到另一个视图时,Ionic会管理历史记录.

    $ionicHistory keeps track of views as the user navigates through an app. Similar to the way a browser behaves, an Ionic app is able to keep track of the previous view, the current view, and the forward view (if there is one). However, a typical web browser only keeps track of one history stack in a linear fashion.

    Unlike a traditional browser environment, apps and webapps have parallel independent histories, such as with tabs. Should a user navigate few pages deep on one tab, and then switch to a new tab and back, the back button relates not to the previous tab, but to the previous pages visited within that tab.

    在github上打开了一个错误,该错误尚未修复(仅在2.0中修复),亚当·布拉德利指出:

    The back button does not display because when you go into a tab, it enter's it own "history", meaning each tab has its own navigation back and forward.

    因此,基本上,当您从标签页切换到常规视图时,您将失去后退按钮。

    您可以做的是自己创建一个:

    <ion-nav-buttons side="left">
        <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
            <i class="icon ion-ios-arrow-back"> Back</i> 
        </button>
    </ion-nav-buttons>
    

    并将其放在您的视图内

    <ion-view view-title="home">
      <ion-nav-buttons side="left">
        <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
          <i class="icon ion-ios-arrow-back"> Back</i> 
        </button>
      </ion-nav-buttons>
        <ion-content padding='true' scroll='false' has-footer='false'>
            <div class="card">
                <div class="item item-text-wrap">
                    HOME PAGE
                </div>
            </div>
        </ion-content>
    </ion-view>
    

    如您所见,我用过 ng-click="goBack()" 按钮.

    在您的控制器中,您只需:

    $scope.goBack = function(){
        $ionicHistory.goBack();
    }
    

    别忘了注入 $ionicHistory 在您的控制器中。

    PS:这是一个过于简化的解决方案,因为它不检查历史记录是否具有后视图:

    $ionicHistory.viewHistory().backView
    

  • 13天前
    3 #

    在您的

    内添加跟随线
    <ion-navbar hideBackButton="true">
        <button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>
    

  • ios:目标C:从UIButton类的子类创建的按钮不起作用
  • 在Python中将表格作为电子邮件正文(而非附件)发送