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