ionic2：幻灯片中的内容不滚动

Question

我有几张幻灯片，其中添加了动态内容。问题是幻灯片内的内容不滚动。所以如果我有很多项目只有一些显示并且没有滑动的能力。我怎样才能让我的列表中的内容在他们的幻灯片中滑动？

<ion-content>
    <ion-slides (change)="onSlideChanged($event)">
        <ion-slide >
            <ion-list>
            <ion-item *ngFor="#item of items1; #i = index">
            <h2>{{item}</h2>
            </ion-item>
            </ion-list>
        </ion-slide>
         <ion-slide>
                 <ion-list>
            <ion-item *ngFor="#item of items2; #i = index">
            <h2>{{item}</h2>
            </ion-item>
            </ion-list>
        </ion-slide>
    </ion-slides>
</ion-content>

Answer 1

我有同样的问题，我是这样解决的：

    <ion-slides style="height: auto">
       <ion-slide *ngFor="#item of items">
           <h1>{{item.title}}</h1>
           <p>{{item.description}}</p>
       </ion-slide>
    </ion-slides>

Answer 2

看起来您需要将长内容包装在每个 <scroll-content> 内的每个 <ion-slide> 中，例如：

<ion-slides>
    <ion-slide *ngFor="#item of items">
      <scroll-content>
        <h1>{{item.title}}</h1>
        <p>{{item.description}}</p>
      </scroll-content>
    </ion-slide>
</ion-slides>

注意，如果您希望文本不居中，您可能需要使用text-align:left，因为这是<ion-slide> 中内容的默认设置。

Answer 3

如booyoungxu's answer 中所述设置style='height:auto' 会在您滑动第一张幻灯片后禁用滑动。 style='overflow:scroll' 效果最好。

<ion-slides style="height: auto">
...
</ion-slides>

Answer 4

在控制器中，输入：

ngAfterViewInit() {
  this.slides.autoHeight = true;
}