Ionic 3 可滚动内容

Question

我正在使用离子 3。

<ion-header>
    <ion-navbar>
        <ion-title>{{ title }}</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>


</ion-content>
<ion-footer>
    <ion-title>
        {{ title }}
    </ion-title>
</ion-footer>

当内容超过屏幕高度时，我在“离子内容”中放入的内容不会滚动。我尝试在内容中使用网格：

 <ion-grid>
    <ion-row>
        <ion-col col-6>
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
        <ion-col col-6>
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
        <ion-col col-12 class="left-col">
            <ion-label>Some label</ion-label>
            <div>Some text</div>
        </ion-col>
    </ion-row>
</ion-grid>

还尝试使用列表：

<ion-list>
  <ion-item>Item 1</ion-item>
  <ion-item>Item 2</ion-item>
  <ion-item>Item 3</ion-item>
   ...
</ion-list>

什么都行不通。这里有什么问题？

Answer 1

我认为这应该由 Ionic 自动处理。

要启用垂直滚动到您的页面或任何其他容器，有一个名为

 <ion-scroll scrollY="true">
     // your content here
 </ion-scroll>

要启用水平滚动，只需将scrollY=true更改为scrollX=true

在您的 sass 文件中添加以下内容：

ion-scroll {
    white-space: nowrap;
    height: 500px;
}