Question

我想要一个＆＃34;帮助图标＆＃34;按钮出现在Ionic项目中每个导航视图的标题栏中。为此，我在 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>

我想要的帮助按钮会按预期显示在每个视图中，但无法点击。我猜测它必须在离子导航视图中对自身的分层做些什么？

我尝试的事情：

将按钮包裹在一个锚中
删除行和列位置

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

非常感谢任何有关无法点击按钮的帮助/评论。

编辑：

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

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

好像这个导航栏与标题栏重叠。而这个代码是必不可少的，因为＆＃34;后退按钮＆＃34;实现。删除此代码块将返回帮助图标按钮的功能。

Answer 1

我弄清楚我做错了什么。 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>

离子标题栏按钮不互动

1 个答案: