Ionic 3 可滚动内容答案

【问题标题】：Ionic 3 scrollable contentIonic 3 可滚动内容
【发布时间】：2018-07-12 23:29:21
【问题描述】：

我正在使用离子 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-content”中输入的内容没有滚动。我尝试在内容中使用网格：

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

没有任何作用。这里有什么问题？

【问题讨论】：

离子内容已经生成离子滚动。你能复制粘贴你的完整代码吗，因为这很奇怪。
我同意这对我来说也很奇怪。我不知道如何发送完整的代码示例，因为它是一些带有贪婪数据的 for 循环。但我尝试了简单的例子，我在这里添加的网格和列表，没有任何反应，没有滚动。

标签： css ionic-framework ionic3

【解决方案1】：

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

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

的标签

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

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

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

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

【讨论】：

【解决方案2】：

真正的问题是 ionic 全局 CSS 属性在项目中被覆盖。 “滚动内容”类不得在项目样式中更改。

【讨论】：

【解决方案3】：

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

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

另外，如果还没有改变，你可以在后面加上'!important'，像这样：

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

【讨论】：