Ionic 2 Slide 不滚动且内容居中

Question

几天来我一直在尝试使 ion-slide 内容滚动，但它不起作用。另外由于某种原因，内容居中，这不是我想要的，我希望内容从顶部开始。

请看下面我的代码：

<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

可能缺少一些 css，请查看此示例：

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

Answer 2

您可以添加此样式以使内容从顶部开始

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

Answer 3

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

Answer 4

与类似的答案，您需要将您的长内容包装在每个<ion-slide>内的<scroll-content>中，例如：

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

Ionic 2 Slide 不滚动且内容居中

Ionic 2 Slide Not Scrolling and Centered Content

ionic2