angular - ionic 3 Angular ionic slider 垂直对齐顶部

Question

我正在使用 ionic 3 ion-slides 和 ion-slide。我面临的问题是内容位于中心，我希望它顶部对齐。代码如下:

<ion-content padding>

    <ion-slides pager>
      <ion-slide style="vertical-align:top">
          <ion-card padding>
           <ion-card-header class="ha-card-header">About you</ion-card-header>
              <ion-card-content>
                    <ion-label>Family Size&nbsp;<ion-badge>{{energyProfile.familySize}}</ion-badge></ion-label>
                    <ion-item no-padding>
                        <ion-range [(ngModel)]="energyProfile.familySize" min="0" max="10" step="2">
                          <ion-icon range-left small name="person"></ion-icon>
                          <ion-icon range-right name="people"></ion-icon>
                        </ion-range>
                    </ion-item>
              </ion-card-content>
            </ion-card>
      </ion-slide>
</ion-slides>
<ion-content>

Answer 1

您可以使用 css 规则来做到这一点:

ion-slide.swiper-slide {
    align-items: flex-start;
}

默认是align-items: center;。

编辑:

来自 @Ryan Coolwebs评论:

You may also find (on some occasions) that you also will now need to adjust the pagination component as it will be under the '.swiper-wrapper' with significant whitespace (i.e placing the ion-slides component within col layout).

A reasonable solution is to inset the pagination by assigning this css:

ion-slides.slides {
  height: auto;
}

.swiper-pagination {
  bottom: 0px;
}

Then adjust the transparency settings and colors of pagination system.