css - 不随列表滚动的 ionic 添加标题

Question

我现在正在使用 Angular.js 和 Ionic，我的 View 如下所示:

<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>

现在我想添加第二个标题，它必须位于标题为 My list (ion-view) 的主标题下。

我在开始的 ion-content 和包含列表的 div 之间添加这样的代码(如下所示)时发现的

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

标题也会滚动。我不想要那个。标题必须固定在主标题下。

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

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

Answer 1

以下应该适合您:

<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 类。如果没有这个 CSS 类，副标题将与部分内容重叠。