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

Question

我在开发的应用程序中遇到了一些问题，在该应用程序中，客户希望拥有一些包含选项卡和过滤器的固定区域，以及一个包含在选项卡上选择的相应数据的无限滚动主区域和过滤：

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

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

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

关于如何实现这一点的任何想法？

Answer 1

将固定的内容放入标题本身并包裹在一个离子行中

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

如果您不想将选项卡放入标题中，这是您可以使用的第二种解决方案

将固定的选项卡和其他您想要固定在顶部下方标题的内容包装到 div 中，并使用这些 css 属性将位置粘性添加到 div

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