Блог

У меня возникли некоторые проблемы в приложении, которое я разрабатываю, в котором клиент хочет иметь несколько фиксированных областей, содержащих вкладки и фильтры, и одну основную область бесконечной прокрутки, содержащую соответствующие данные, которые выбраны на вкладках и отфильтрованы:

Я пробовал разные варианты, чтобы выполнить эту компоновку, и в каждом случае у меня были некоторые проблемы:

• Оберните всю основную область (желтый синий) в не прокручиваемый ионный контент, сделайте синюю область прокручиваемой, закрыв остальную часть экрана с помощью flexbox. Проблемы: бесконечная прокрутка не работает, так как в качестве области прокрутки требуется ионное содержимое. У меня такое чувство, что макет не очень солидный и может действовать неожиданно. Кроме того, с точки зрения UX большинство пользователей привыкли прокручивать весь экран, а не только область
• Используйте метку ионного содержимого вокруг синей области. Проблемы: верхний и нижний колонтитулы неуместны
• Что я думаю, может быть лучшим способом: оберните ионное содержимое вокруг желтой и синей областей и сделайте желтую область плавающей (слот=»фиксированный»). Проблемы: Я не хочу устанавливать фиксированное верхнее поле в синей области, так как эта высота может меняться в зависимости от используемого устройства. Возможно, это можно было бы сделать программно, но я бы предпочел сделать это только с помощью CSS

Кроме того, возможно, можно включить желтую область в ионный заголовок, но я нахожу это очень негибким и трудным для структурирования. В этом случае заголовки вкладок будут находиться в ионном заголовке, а содержимое-в ионном содержимом, что, с моей точки зрения, кажется довольно странным.

Есть какие-нибудь идеи о том, как этого добиться?

поместите фиксированное содержимое в сам заголовок, обернув его в ряд ионов

 <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 и добавьте в div липкую позицию с помощью этих свойств css

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