首页 文章

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

提问于
浏览 次
1

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

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

屏幕：

img1

img2

在我的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中定义新的离子含量指令，但是还没有运气 .

html angularjs angularjs-directive ionic-framework ionic

3 回答

  • 0

    我正在开发的应用程序遇到了类似的问题 . Headers 对齐最初适用于应用启动时的所有页面 . 我有全局 Headers 对齐设置

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

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

    无论如何，默认值应居中 .

    经过一段长时间试图弄清楚这个问题后，我注意到 Headers 对齐问题总是从我的应用程序中的一个特定页面开始 . 访问此页面后， Headers 对齐是随机错误的 - 甚至不会总是发生在应用程序的随机页面中 . 我注意到在开发工具控制台中我在这个特定页面中遇到错误（带有$ ionicNavBarDelegate的东西） . 修复此错误后，修复了 Headers 对齐问题 .

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

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

    编辑：也遇到了这个讨论，可能是问题的原因和合理的解决方案 .

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

    从讨论中我提出了一个解决方案，最终解决了这个问题 .

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

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

    第二次编辑：

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

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

    这最终解决了我的问题 .

    回复于
  • 4

    doc的离子链接

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

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

    appname.config(function($ionicConfigProvider) 
{
      $ionicConfigProvider.navBar.alignTitle('center');
});
    回复于
  • 1

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

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

相关问题