Question

我是Ionic 4的新手，想在Ionic4中设计可滚动的选项卡。但是，当我添加以下代码所示的多个选项卡时，它们会缩小并在同一视图空间中显示。

<ion-tab-bar slot="top">
    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>
</ion-tab-bar>

这是上面的代码的样子

请帮助。

Answer 1

如@ Diodeus-JamesMacFarlane所建议，尝试使用自定义CSS，这是我的解决方案。

通过使用display: flex和overflox-x: scroll

解决

这是我的SCSS文件：

.segment-card {
    display: flex;
    overflow-x: scroll;
    .segment-item {
        display: inline-block !important;
        min-width: 100px !important;
        width: auto !important;
    }
}

这是我的HTML文件：

<ion-card no-padding no-margin class="no-border-radius segment-card">
    <ion-tab-button class="segment-item" tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button class="segment-item" tab="account">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">...
    </ion-tab-button>

    <ion-tab-button class="segment-item" tab="account">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">...
    </ion-tab-button>
</ion-card>

这些是一些屏幕截图

滚动时的屏幕截图

Answer 2

对于这种方法，我宁愿使用离子链段。文档Arrays.asList(T... a)

中有一个很好的例子

<!-- Segment in a toolbar -->
<ion-toolbar>
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="camera">
      <ion-icon name="camera"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="bookmark">
      <ion-icon name="bookmark"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

Answer 3

SCSS

ion-tab-bar {
  overflow: auto;
}

有效

可滚动的Ionic 4标签

3 个答案: