离子：具有固定区域布局的可滚动区域

Question

我在开发的一个应用程序中遇到了一些问题，在该应用程序中，客户希望有一些包含选项卡和过滤器的固定区域，以及一个包含在选项卡和过滤：

我尝试了不同的选项来完成此布局，但在每种情况下都遇到了一些问题：

将所有主要区域（黄色 + 蓝色）包裹在不可滚动的区域中 ion-content，使蓝色区域可滚动，并用 flexbox 覆盖屏幕的其余部分。问题：无限滚动不起作用，因为它需要 ion-content 作为可滚动区域。感觉布局不是很扎实，可能会出其不意。此外，从用户体验的角度来看，大多数用户习惯于在整个屏幕上滚动，而不仅仅是在一个区域上滚动
在蓝色区域周围使用 ion-content 标签。问题：header 和页脚错位
我认为最好的方法是：将 ion-content 包裹在黄色和蓝色区域周围，并使黄色区域浮动（slot="fixed"）。问题：我不想在蓝色区域设置固定的上边距，因为这个高度可能会根据所使用的设备而改变。也许这可以通过编程方式完成，但我宁愿只用 CSS

此外，也许可以在 ion-header 中包含黄色区域，但我发现这非常不灵活，而且难以构建。在这种情况下，选项卡 headers 将在 ion-header 中，而内容在 ion-content 中，从我的角度来看这似乎很奇怪。

有什么实现方法吗？

Answer 1

将固定的内容放入header本身包裹在离子行中

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Header Title</ion-title>
    </ion-toolbar>
    <ion-row class="filter-row">
        <ion-col>
            <span>All</span>
        </ion-col>
        <ion-col>
            <span>High</span>
        </ion-col>
        <ion-col>
            <span>Medium</span>
        </ion-col>
        <ion-col>
            <span>Low</span>
        </ion-col>
        <ion-col>
            <span>No Priority</span>
        </ion-col>
    </ion-row>
</ion-header>

如果您不想将标签放入 header，这里是您可以使用的第二种解决方案

将 header 下面顶部的固定标签和其他你想固定的东西包裹到 div 中，并用这些 [=18= 添加粘性位置到 div ] 属性

    position: sticky;
    top: 0;
    z-index: 1;

离子：具有固定区域布局的可滚动区域

Ionic: Scrollable areas with fixed areas layout

css

angular

ionic-framework

layout

user-experience