Question

我正在使用离子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评论：


您可能还会发现（在某些情况下）您现在也需要   调整分页组件，因为它将在下面   '.swiper-wrapper'具有显着的空白（即放置   col布局中的ion-slides组件。）

合理的解决方案是通过分配这一点来插入分页   的CSS：

ion-slides.slides { height: auto; } .swiper-pagination { bottom: 0px; }

然后调整分页系统的透明度设置和颜色。

离子3角度离子滑动垂直对齐顶部

1 个答案: