Question

虽然我确信这在离子发育中并不常见，但我似乎无法在网上找到解释这一点的任何内容。如果我有以下内容：

<body ng-app="myApp">

  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

</body>

我在ion-nav-view中使用的其中一个视图对于exmaple来说就像这样：

<ion-view view-title="Profile" ng-controller="profileController" class="profile-view">
  <ion-content class="padding has-header">
  ....

如何仅为iOS显示后退按钮（实际上只是ion-chevron-left图标），并将其隐藏在具有专用硬件按钮的其他设备上？

Answer 1

有两种方法可以实现特定于平台的行为。您可以专门阅读后退按钮here。

在您的控制器中，您可以使用ionic.Platform实用程序来确定当前平台，并使用Ionic NavBarDelegate来显示/隐藏按钮。

HTML：

<body ng-app="app" ng-controller="appCtrl">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button></ion-nav-bar-back-button>
  </ion-nav-bar>
</body>

控制器：

.controller('appCtrl', function($scope, $ionicNavBarDelegate) {
   var isIOS = ionic.Platform.isIOS();
   $ionicNavBarDelegate.showBackButton(isIOS);
});

在您的css中，根据平台定义单独的类以显示/隐藏元素。来自here。

HTML：

<body ng-app="app" ng-controller="appCtrl">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="platform-nav"></ion-nav-bar-back-button>
  </ion-nav-bar>
</body>

CSS：

.platform-ios .platform-nav {
    display: block;
}
.platform-android .platform-nav {
    display: none;
}

仅在离子导航栏iOS中显示后退按钮

1 个答案: