離子2幻燈片不滾動和居中內容

Question

我一直在努力使離子幻燈片內容滾動幾天，但它不工作。另外由於某些原因，內容不是我想要的內容，我希望內容從頂部開始。

請參閱下面我的代碼：

<ion-slides pager="false" (change)="onSlideChanged($event)"> 
    <ion-slide style="background-color: green"> 
     <h2>lorem</h2> 

     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor distinctio ducimus ipsam quae porro obcaecati, consequatur ullam velit aperiam fugiat hic delectus. Voluptatibus aliquid doloremque sunt nihil ipsum, voluptatum ex.</h1> 

     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor distinctio ducimus ipsam quae porro obcaecati, consequatur ullam velit aperiam fugiat hic delectus. Voluptatibus aliquid doloremque sunt nihil ipsum, voluptatum ex.</h1> 

     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor distinctio ducimus ipsam quae porro obcaecati, consequatur ullam velit aperiam fugiat hic delectus. Voluptatibus aliquid doloremque sunt nihil ipsum, voluptatum ex.</h1> 
    </ion-slide> 

    <ion-slide style="background-color: blue"> 
     <h2>Slide 2</h2> 
    </ion-slide> 

    <ion-slide style="background-color: red"> 
     <h2>Slide 3</h2> 
    </ion-slide> 
</ion-slides> 

這裏所顯示內容的圖像：

我感謝所有幫助。謝謝！

Answer 1

開始發現，我只是需要在每張幻燈片中使用<ion-content>，一切正常。

Answer 2

可能是一些CSS缺失，看看這個例子：

https://github.com/driftyco/ionic-preview-app/blob/master/app/pages/slides/basic/styles.scss

Answer 3

您可以添加此樣式，以使內容從頂部

ion-slide { 
    align-items: flex-start !important; 
} 

Answer 4

類似的答案https://stackoverflow.com/a/37690398/385730，你需要用你長期的內容在<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> 

Answer 5

裏面添加內容

<ion-content></ion-content> 

來源：https://forum.ionicframework.com/t/ionic2-scroll-within-ionic-slide-not-working/47099/2?u=almgwary

Answer 6

覆蓋離子滑塊css屬性的高度

ion-slides { 
     height: auto !important; 
    }