Question

我真的觉得这是一种疗法，因为如果我没有认真挣扎，我不会在这里发帖。我无法弄清楚出了什么问题，但是当我切换视图时，我的菜单标题和图标似乎开始随机重叠。此外，有时即使视图中的主要内容消失，也会使应用无用。

一旦发生这种情况，我无法点击图标。

屏幕：

在我的menu.html中，我相信这是相关部分

<ion-side-menu-content drag-content="false">
        <ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
            <!-- Hamburger Menu Button -->
            <ion-nav-buttons side="left">
                <button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
                    <span>toggle menu</span>
                </button>
            </ion-nav-buttons>
<!-- Settings -->
            <ion-nav-buttons side="secondary">
                <img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="mainView">
        </ion-nav-view>
    </ion-side-menu-content>

然后我在单独的模板文件中定义视图名称，如此

<ion-view view-title="CMON NOW">

有什么建议可能会在这里发生吗？我尝试将相同的菜单代码复制到每个视图中，并通过ion-nav-title定义视图，但结果是一样的。

由于

原始问题发布在Ionic论坛上。从那时起，我已经删除了除了一个离子含量元素以外的所有元素，因为我发现了一个类似的问题，标记的答案是不要在我的视图html中定义新的离子含量指令，但是还没有运气。

Answer 1

我正在开发的应用程序遇到了类似的问题。标题对齐最初适用于应用启动时的所有页面。我用

全局标题对齐集

$ionicConfigProvider.navBar.alignTitle('center');

从离子文档中找到：http://ionicframework.com/docs/api/provider/ $ ionicConfigProvider /

默认值应该居中。

经过几个小时试图找出这个问题后，我注意到标题对齐问题始终始于我的应用中的一个特定页面。访问此页面后，标题对齐是随机错误的 - 甚至不会总是发生在应用程序的随机页面中。我注意到在开发工具控制台中我在这个特定页面中遇到错误（带有$ ionicNavBarDelegate的东西）。修复此错误后，修复了标题对齐问题。

因此，在您的情况下，我会确保代码本身没有其他错误，这可以修复并希望能解决您的问题。

这只是一个很长的镜头，可能不是你的应用程序的情况，但嘿，它可以帮助你调试这个问题，希望你得到它修复。

编辑：也遇到了这个讨论，可能是导致问题和合理修复的原因。

https://github.com/driftyco/ionic/issues/2881

从讨论中我提出了一个最终解决问题的解决方案。

$scope.$on('$ionicView.afterEnter', function (event, viewData) {
  $timeout(function() {
    $ionicNavBarDelegate.align('center');
  }, 100);
});

试一试！不幸的是，这似乎是一个有角度的问题而不是离子问题。

第二次编辑：

如果没有别的帮助你可以禁用translate3d css属性，该属性用于在标题中设置动画，因为它似乎有时在我的应用中被破坏了。（可能有一个更好的解决方案来禁用动画，但我没有调查，因为我匆忙修复）。 css：

.title {
  transition-duration: 0ms !important;
  transform: translate3d(0px, 0px, 0px) !important;
  text-align: center !important;
}

这最终解决了我的问题。

Answer 2

doc的离子链接

http://ionicframework.com/docs/api/provider/ $ ionicConfigProvider /

您可以使用应用程序配置

进行设置

appname.config(function($ionicConfigProvider) 
{
      $ionicConfigProvider.navBar.alignTitle('center');
});

Answer 3

您可以使用z-index属性作为按钮。

.button {
   position: relative;
   z-index: 9999;
}

查看标题和菜单按钮重叠+查看内容随机消失::离子

3 个答案: