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>

现在我想添加第二个标题，该标题必须位于主标题下，标题为我的列表（离子视图）。

我在开头的离子内容和包含列表的 div 之间添加了这样的代码（如下所示）

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

标题也会滚动。我不希望这样。标题必须放在主标题下。

这是因为离子含量元素。但是当我在离子含量之外声明二级标题时，我看不到标题。

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

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>

要指出的一个重要事项是应用于content指令的has-subheader类。没有这个CSS类，子标题将重叠一些内容。

Answer 2

您要找的是一个副标题，而不是当前标题下方的标题。

试试这个：

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

此处有更多详情： http://ionicframework.com/docs/components/#subheader

Ionic添加标题，不会滚动列表

2 个答案: