首页 文章

切换标签时，离子后退按钮显示不正确

提问于
浏览 次
5

我有一个主选项卡，它只显示项目列表 . 和设置选项卡，其中包含用于设置不同配置的嵌套视图 .

如果我按此特定顺序导航，后退按钮显示不正确，或者如果要显示，则 Headers 不会离开：37px

这就是我创建导航栏的方式 .

<ion-nav-bar class="bar-stable no-animation" align-title="left">
  <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>

enter image description here

是否有解决方案，要么清除该选项卡的历史记录，那么在单击它时会打开主设置选项卡而不是先前打开的嵌套视图？或者如果需要显示，则应正确计算 Headers 的左侧 .

这是一个codepen演示 . 单击此顺序中的选项卡 .

1. On main page, click on Scientific Facts
2. After view changes, click on Contacts tab
3. Then click on Home tab again. It reproduces the behavior.

更新：

到目前为止，我发现有一个 $scope.$watch 决定是否显示或隐藏后退按钮 . 这会被触发很晚（在计算和 Headers 对齐之后） . 因此，在计算时， leftWidth 不是't get back button'的宽度 .

javascript angularjs cordova-3 ionic-framework

2 回答

  • 4

    当像这样使用选项卡时，每个选项卡都包含自己的历史记录 . 它实际上正确显示了后退按钮，因为主页面选项卡状态已更改为子页面 . 然后，后退按钮将带您返回此选项卡的主页（后退按钮特定于每个选项卡！） . 第一次单击/点击选项卡按钮可以完成切换选项卡的工作，第二次单击/点击将实际将用户带到该选项卡的默认页面 . 该错误有时仍然应用后退按钮宽度 .

    我相信Ionic团队正在为此进行一些改进和修复 .

    您可以在主页的控制器中使用 $ionicNavBarDelegate.showBackButton(false); 来禁用该视图中的后退按钮 . 您还可以将 nav-clear 指令置于锚标记上，以明确隐藏链接视图中的后退按钮 .

    Controller Example

    angular.module('App').controller('HomeCtrl', function ($scope, $ionicNavBarDelegate) {
  // Disable back button on this controller
  $ionicNavBarDelegate.showBackButton(false);
});
    回复于
  • 0

    如果您仅使用Angular Routes，请使用follwoing

    $route.reload()

    如果在Ionic上使用UI-Router，也可以使用以下命令

    $state.go($state.current, {}, );

    回复于

相关问题