Ionic 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-slide {
  align-items: flex-start !important;
}

Answer 2

发现我只需要在每张幻灯片中使用<ion-content>，一切正常。

Answer 3

可能有些css丢失，请查看此示例：

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

Answer 4

https://stackoverflow.com/a/37690398/385730的类似答案，您需要将长篇内容包含在每个<scroll-content>的{​​{1}}内，例如：

<ion-slide>

Answer 5

在

中添加您的内容

<ion-content></ion-content>

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

Answer 6

覆盖ion-slides css属性的高度

    ion-slides {
        height: auto !important;
    }