在一页中用ion-header-bar覆盖ion-nav-bar

时间:2021-07-31 22:59:02

i am tryng to show ion items with ion header bar having default ion nav bar.

我正在尝试使用具有默认离子导航条的离子标题栏来显示离子项目。

The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.

问题是,我想在一页而不是离子导航栏中使用离子条头。我尝试过以下但没有运气。

Below from index.html

下面是index.html

<ion-nav-bar class="bar-light  bar-positive">
        <ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
    </ion-nav-bar>

Below from one page:

以下是一页:

<ion-view title="items" id="page15" >
  <ion-content  ng-controller="itemsCtrl"  class="has-header"  hide-nav-bar="true">
  <ion-header-bar class="bar-positive">
    <div class="buttons">
      <button class="button button-icon icon ion-ios-minus-outline"
        ng-click="data.showDelete = !data.showDelete"></button>
    </div>
    items
    <div class="buttons">
      <button class="button button-icon icon ion-log-out" ng-click="test()">
      </button>
    </div>
  </ion-header-bar>
    <ion-list show-delete="data.showDelete" >
      <ion-item ng-repeat="item in items" 
        item="item"
         class="item-remove-animate">
         {{ item.name }}
        <ion-delete-button class="ion-minus-circled" 
          ng-click="onItemDelete(item)">
        </ion-delete-button>
      </ion-item>
    </ion-list>
  </ion-content>
  <div class="float-button" ng-click="additem()">
    <span class="height-fix">
     <a class="content">
      <i class="ion-ios-plus-empty"> </i>
     </a>
    </span>
  </div>
</ion-view>

The output is coming as below

输出结果如下

在一页中用ion-header-bar覆盖ion-nav-bar

i dont want the default ion nav bar n that page and want only ionic header bar.

我不想要那个页面的默认离子导航条,只想要离子标题栏。

1 个解决方案

#1


0  

I got it finally. Just add nav bar buttons instead of ionic header bar.

我终于明白了。只需添加导航栏按钮而不是离子标题栏。

#1


0  

I got it finally. Just add nav bar buttons instead of ionic header bar.

我终于明白了。只需添加导航栏按钮而不是离子标题栏。