代码之家 › 专栏 › 技术社区 › Varun Sukheja

可滚动的离子4标签

ionic4 ionic-framework angular css

Varun Sukheja · 技术社区 · 5 年前

我是爱奥尼亚4的新手,想在爱奥尼亚4中设计可滚动的标签。但是,当我添加多个标签时,如下面的代码所示,它们会缩小并显示在同一个视图空间中。

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

上面的代码就是这样的

请帮忙。

1 回复 | 直到 5 年前

Varun Sukheja 5 年前

正如@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>

这些是一些屏幕截图

滚动时的屏幕截图