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>的{{1}}内，例如：

<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中内容的默认值。

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;
}

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

4 个答案: