首页 文章

导航按钮未显示在离子视图离子中

提问于
浏览
3

我想在离子视图中创建导航后退按钮 . 我试试这段代码:

<ion-view view-title="Event details">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
<ion-content >
</ion-content>
</ion-nav-view>

但我没有得到按钮 . 任何形式的帮助表示赞赏 .

1 回答

  • 6

    如果没有历史记录,则返回按钮不会显示 . 刷新页面或应用程序时会删除历史记录 . 这在浏览器中进行开发时非常常见 . 但是在设备中不会出现这种情况,因为您无法刷新应用程序 .

    第一种显示后退按钮的方法

    in index.html

    <body ng-app="starter" ng-controller="AppCtrl" class="">
        <ion-nav-bar id="mainNav" class="bar-dark">
            <ion-nav-back-button class="button-clear">
                <i class="icon ion-ios-arrow-back"></i>
            </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view animation="slide-left-right" class="scFont appFontSmall"></ion-nav-view>
      </body>
    

    显示后退按钮的第二种方法是自己处理它 . index.html可以使用与上面相同的代码 . 但是视图会有这样的东西

    <ion-view  view-title="Title"  hide-back-button="true"> 
          <ion-nav-buttons side="left"> 
               <a ng-click="goBackState()" class="button button-icon icon ion-ios-arrow-back"></a>
          </ion-nav-buttons>
          <ion-content>
          </ion-content
     </ion-view>
    

    goBackState()是您可能想要放在app.run函数中的函数

    $rootScope.goBackState = function(){
      $ionicViewSwitcher.nextDirection('back');
      $ionicHistory.goBack(); 
    }
    

    但请记住,如果没有历史记录,此功能也将无效 . 希望这可以帮助

相关问题