Ionic 4 Angular: возможно ли иметь фиксированный элемент в контенте при использовании бесконечного обновления?

Question

Рассмотрим содержимое простой ионной страницы:

<ion-content>

    <ion-refresher slot="fixed">...</ion-refresher>

    <div *ngFor="let item of items">
        ...
    </div>

    <ion-infinite-scroll>...</ion-infinite-scroll>

</ion-content>

Я сделал Stackblitz, чтобы продемонстрировать эту страницу: https://stackblitz.com/edit/ionic-v4-angular-tabs-nbjk4k

Теперь я хотел бы добавить что-то с фиксированной позицией - скажем,<div>Some content</div> - вверху или внизу страницы, которая НЕ находится в разделе ion-header или ion-footer. Можно ли исправить это div, чтобы оно прилипало к вершине или низу?

Официальный совет, который я нашел на Ionic Docs и Github, заключался в том, чтобы использовать slot="fixed" на любом элементе, который я хотел бы исправить вобласть содержимого.

Это как-то не работает для меня, может быть, есть конфликт с slot="fixed" компонента повышения квалификации.

Как можно получить фиксированный элемент?

Answer 1

Ссылка: https://github.com/ionic-team/ionic/issues/17754

В слоте = ошибка исправлена. Чтобы вы могли получить желаемый результат, вам нужно поставить style = "position: относительный", как описано выше.

Я создал для вас простой пример ниже:

<ion-content>
<div slot='fixed' style="position:relative">Some content</div>

 <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
  <ion-refresher-content></ion-refresher-content>
 </ion-refresher>

 <div *ngFor="let item of items; let i=index;" class="item">
   Item {{i}}: {{ item }}
 </div>

 <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
  <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Loading more data...">
  </ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>

Answer 2

Действительно, была проблема с slot="fixed", команда Ionic сделала некоторые изменения для этого.

Содержимое (div?) Должно быть перенесено в положение: относительная оболочка.
Используйте position:relative в теге, и это должно сработать. Например - <div slot='fixed' style="position:relative">Some content</div>.

Следуйте этому PR для получения дополнительной информации. Надеюсь, это поможет !!