首页 文章

离子 Headers 栏按钮不互动

提问于
浏览 次
0

我希望在Ionic项目的每个导航视图的 Headers 栏中显示一个"Help Icon"按钮 . 为此，我在 index.html 页面中包含以下内容：

<ion-nav-view>
  <ion-header-bar>
    <div class="row">
        <div class="col col-10 col-offset-90">
            <div class="buttons">
                <button class="button" ng-click="doSomthing()"><i class="ion-help-circled"></i></button>
            </div>
        </div>
    </div>
  </ion-header-bar>
</ion-nav-view>

我想要的帮助按钮按预期显示在每个视图中，但是 not clickable . 我猜它必须在 ion-nav-view 中对自身的分层做些什么？

我尝试过的事情：

  • 包装锚点中的按钮

  • 删除行和列放置

注意：我在其他视图中也有离子 Headers 栏，所以我可以显示页面 Headers . 这会影响按钮吗？该按钮仍然出现但在任何地方都不是交互式

任何帮助/评论为什么按钮是 not clickable 非常感谢 .

EDIT:

所以我在经过更多测试后缩小了我的问题 . 问题出在我的 index.html 文件中的以下代码：

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

好像这个导航栏与 Headers 栏重叠 . 由于"Back Button"实现，此代码至关重要 . 删除此代码块将返回 Help Icon Button 的功能 .

html ionic-framework

1 回答

  • 0

    我弄清楚我做错了什么 . ion-header-bar 不应在 ion-nav-bar 之后使用 . 这样做会导致它重叠而不是交互式 . 将按钮添加到 ion-nav-bar 本身就解决了这个问题 . 以下代码完美运行并在所有视图上显示按钮：

    <ion-nav-bar>
   <ion-nav-back-button>
      <i class="icon ion-ios-arrow-left"></i>
   </ion-nav-back-button>
   <ion-nav-buttons side="right">
      <a ui-sref="url.path.tohelp" class="button icon ion-ios-help"></a>
   </ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view>
</ion-nav-view>
    回复于

相关问题