Question

我在使用

时无法滚动内容

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>

Answer 1

此问题已在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的滚动条就不能了

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

Answer 3

很抱歉回答这个问题的时间太晚了，这不只是一个答案，这是一种解决方法，但是它可能使人们陷入困境，因此我仍然将其留在这里：

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

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

我仍然欢迎更好的答案。

Answer 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

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

4 个答案: