Feste top-Inhalte mit scrollbaren Listenansicht ionic

Die beste option, wenn Sie möchten, um überschriften und sub-überschriften mit verschiedenen Höhen - wie in Ihrem Fall - ist die Verwendung sass und passen Sie die Variablen.

Aus dem Verzeichnis der Anwendung, die Sie ausführen können:

ionic setup sass

und Ionischen schaffen würde, die die scss-Dateien und die gulp-task verknüpft.

Wie Sie sehen können hier die Höhe der subheader

$bar-subheader-height: $bar-height !default;

ist gleich der Höhe der Kopfzeile: 44px:

$bar-height: 44px !default;

Könnten Sie ändern Sie den Wert für $bar-subheader-height hinzufügen einer Zeile in der ionic.app.scss Datei (Ordner scss):

$bar-subheader-height: 150px;

und die gulp-task zusammenstellen würde in der geänderten css - Datei.

Die andere option ist, um neu zu definieren, css-Regeln. Wie Sie sehen können, in diesem plunker

Habe ich überschriften und sub-überschriften (mit den gleichen Richtlinien ion-header-bar):

  <ion-view>

    <ion-header-bar class="bar-stable">
      <h1 class="title">Awesome App</h1>
    </ion-header-bar>

    <ion-header-bar class="bar bar-subheader">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" align="center" ng-model="newmsg" placeholder="Title">
        </label>
        <button class="button button-small  button-button-outline button-balanced" ng-click="insert(newmsg)">Add</button>
      </div>

      <div class="item item-input-inset">
        <ti-segmented-control on-select="tapChanged($index)" style="width: 100%;">
          <ti-segmented-control-button class="button-balanced" title="'title 1'" selected> </ti-segmented-control-button>
          <ti-segmented-control-button class="button-balanced" title="'title 2'"></ti-segmented-control-button>
        </ti-segmented-control>
      </div>

    </ion-header-bar>

    <ion-content class="has-subheader">

      <ion-list>
        <ion-item class="item" ng-repeat="item in items">{{item.name}}</ion-item>
      </ion-list>

    </ion-content>

  </ion-view>

in der css habe ich erstellt, 2 Stile, die angewendet werden, um die zweite <ion-header-bar> und die <ion-content>:

.bar-subheader
{
  height: 114px !important;
  border: none;

}

.has-subheader {
    top: 160px !important;
}

Wie Sie sehen können, es funktioniert wie erwartet, aber vielleicht laufen in einige merkwürdige Verhaltensweisen. Ich würde vorschlagen, Sie gehen für die sass-Variablen.

UPDATE:

Wenn Sie nur wollen, ändern Sie das Verhalten in eine Seite, die Sie anpassen können, die bar-subheader element:

.bar-subheader.custom
{
  height: 114px !important;
  border: none;
}

"und definieren Sie einen benutzerdefinierten has-subheader:

.has-subheader-custom {
    top: 160px !important;
}

Die Sie gehen zu Referenz hier:

<ion-header-bar class="bar bar-subheader custom">

und hier:

<ion-content class="has-subheader-custom">

und diese plunker führt.

InformationsquelleAutor LeftyX