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

Answer 2

真正的问题是在项目中覆盖了离子全局CSS属性。不得在项目样式中更改“scroll-content”类。

Answer 3

您可以在CSS中使用“ ion-list”属性并进行以下更改：

ion-list 
{
    overflow-y: scroll;
};

此外，如果尚未更改，则可以在后面加上“！important”，如下所示：

ion-list 
{
    overflow-y: scroll !important;
};

Ionic 3可滚动内容

3 个答案: