ionic2 : content in slides not scrolling

问题

I have a couple of slides which have dynamic content that is added to them. The problem is the content inside of the slides doesn't scroll. So if I have a lot of items only some show and there is no ability to slide. How can I make it so the content in my lists slides inside of their slides?

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

回答1:

I have the same problem,and I solve it like this:

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

回答2:

Looks like you need to wrap your long content in a <scroll-content> inside of each <ion-slide>, for example:

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

Note, you may need to do a text-align:left if you want the text to not be centered, since thats the default for content in <ion-slide>.

回答3:

Setting style='height:auto' as stated in booyoungxu's answer disables sliding after you swipe on the first slide. style='overflow:scroll' works best.

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

回答4:

In controller, put:

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

来源：https://stackoverflow.com/questions/36827211/ionic2-content-in-slides-not-scrolling

标签

ionic-framework

angular

ionic2