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

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 论坛上。从那以后，我删除了除一个以外的所有 ion-content 元素，因为我发现了一个类似的问题，其标记的答案是不要在我的视图 html 中定义新的 ion-content 指令，但仍然没有运气。

Answer 1

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

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

Answer 2

文档的离子链接

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

您可以使用应用程序配置进行设置

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

Answer 3

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

全局设置了标题对齐方式

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

从 ionic 文档中找到：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;
}

这最终为我解决了问题。