在 ionic 4 中使用 ion-tabs 时，内容滚动不起作用答案

【问题标题】：Content scroll is not working when using ion-tabs in ionic 4在 ionic 4 中使用 ion-tabs 时，内容滚动不起作用
【发布时间】：2020-05-13 13:37:55
【问题描述】：

我在使用时无法滚动内容

Ionic 4 + Angular 7

它似乎停止了屏幕无法滚动屏幕。

dashboard.component.html

<app-header></app-header>
<ion-content scroll="true">
Dashboard
This is the test content    
</ion-content>
            <ion-tabs>
    <ion-tab-bar slot="bottom">
    <ion-tab-button tab="dashboard>
        <ion-label>Home</ion-label>
        <ion-icon name="home"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="leave">
        <ion-label>Settings</ion-label>
        <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

【问题讨论】：

标签： angular7 ionic4

【解决方案1】：

很抱歉回答得晚了，这不仅仅是一个答案，这是一种解决方法，但它可能会让人们感到困惑，所以我还是把它留在这里：

删除“<ion-tabs>”标签。

我找不到其他方法，但这更像是一种解决方法，因为正是这些标签可以让您将所有路由留给 Ionic。

我仍然欢迎更好的答案。

【讨论】：

【解决方案2】：

我解决了在我的代码上添加<ion-toolbar>，就像这样

    <ion-toolbar>
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="video">
      <ion-icon name="videocam"></ion-icon>
      <ion-label>Video Learning</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="podcast">
      <ion-icon name="musical-notes"></ion-icon>
      <ion-label>Podcast</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
</ion-toolbar>

【讨论】：

这对我有用。您不必将整个内容放在 ion-content 中，这样更有意义。

【解决方案3】：

此问题已在 ionic 框架的 1.2.4 版本中修复，请更新您的 ionic。

这是一个常见的修复，编辑scss/_scaffolding.scss：

  &.pane {
    overflow-x: hidden;
    overflow-y: scroll;
  }

你也可以试试：

div {
    width: 150px;
    height: 150px;
    overflow: scroll;
}

或者原生滚动：

<ion-scroll direction="xy" style="width: 500px; height: 500px"> </ion-scroll>

我遇到了同样的问题，我注意到如果我添加了overflow-scroll=false，则滚动有效，而 true 则无效

【讨论】：

【解决方案4】：

试试这个：

<ion-footer>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="dashboard>
        <ion-label>Home</ion-label>
        <ion-icon name="home"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="leave">
        <ion-label>Settings</ion-label>
        <ion-icon name="settings"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-footer>

你必须添加 ion-footer

【讨论】：