Ionic add header 不随列表滚动

Question

我现在正在使用 Angular.js 和 Ionic，我的视图如下所示：

<ion-view view-title="My list">
  <ion-content>     

  <!-- checkboxes with items -->
  <div>
     <ul class="list">
        <li class="item item-checkbox" ng-repeat="myItem in myItems">
           <label class="checkbox">
              <input type="checkbox" ng-model="myItem.checked">
           </label>
           {{myItem.Name}}
        </li>
     </ul>
  </div>

  </ion-content>
</ion-view>

现在我想添加第二个 header，它必须在主 header 下，标题为 我的列表（ion-view).

我在 ion-content 和 div 之间添加这样的代码（如下所示）时发现名单

<div class="bar bar-header bar-positive>
...
</div>

header 也可以滚动。我不想要那个。 header 必须固定在主 header.

下

那是因为 ion-content 元素。但是当我在 ionic-content 之外声明辅助 header 时，我看不到 header.

也许你知道一些对我的建议。谢谢

Answer 1

您正在寻找的是 header，而不是低于您当前 header 的 header。

试试这个：

<div class="bar bar-subheader bar-positive">
  <h2 class="title">My list</h2>
</div>

这里有更多详细信息： http://ionicframework.com/docs/components/#subheader

Answer 2

以下应该适合您：

<ion-view view-title="Playlists">
  <ion-header class="bar bar-balanced bar-subheader">Test</ion-header>
  <ion-content class="has-subheader">
    <!-- content -->
  </ion-content>
</ion-view>

需要指出的重要事项之一是 has-subheader class 应用于内容指令。没有这个CSSclass，副标题会和部分内容重叠

Ionic add header 不随列表滚动

Ionic add header which does not scroll with list

css

ionic