html - View Title 和 Menu Button 重叠 + View Content 随机消失::Ionic

Question

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

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

屏幕:

在我的 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>

然后我像这样在单独的模板文件中定义 View 名称

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

有什么建议吗？我尝试费力地将相同的菜单代码复制到每个 View 中，并通过 ion-nav-title 在那里定义 View ，但结果是一样的。

谢谢

原始问题发布在 Ionic 论坛上。从那时起，我删除了除一个 ion-content 元素之外的所有元素，因为我发现了一个类似的问题，其标记的答案是不在我的 View html 中定义新的 ion-content 指令，但仍然没有运气。

Answer 1

我正在开发的应用程序遇到了类似的问题。标题对齐最初适用于应用程序启动时的所有页面。我在全局范围内设置了标题对齐方式

$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);
});

试试吧!不幸的是，这似乎是一个 Angular 问题而不是 ionic 问题。

第二次编辑:

如果没有其他帮助，您可以禁用用于在标题中设置动画的 translate3d css 属性，因为它似乎有时在我的应用程序中被破坏。 (可能有更好的解决方案来禁用动画，但我没有调查，因为我急于修复)。 CSS:

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

这最终为我解决了问题。