Ionic: Липкая кнопка внизу определенного ионного слайда

Question

Я создаю кучу слайдов с вопросами; Последний слайд представляет собой обзор предыдущих ответов на вопросы. Внизу у меня есть кнопка отправки, которую я хочу всегда видеть на этом (последнем) слайде внизу страницы.

Я попробовал следующее:

• Используйте кнопку-ион, которая не прилипает.

• Используйте CSS с "position: sticky! Important;" на кнопке

• Обернуть все, кроме кнопки, в содержимое ионной карты

<ion-slide>
    <ion-card>
      <h1>Questions Overview</h1>
      <ion-list *ngFor="let question of questions">
        <ion-item>
          <ion-label>
            Question: {{ question.question }}
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            Your Answer: {{ question.answer }}
          </ion-label>
        </ion-item>
      </ion-list>
      <ion-button (click)="onSubmit()" expand="full">Submit</ion-button>
   </ion-card>
</ion-slide>

Я не настолько опытен в рамках, поэтому я не могу попробовать что-нибудь еще.

При использовании Google я нашел только вопросы и ответы о кнопках за пределами ion-контента. Это не помогает, так как все, что используется на странице, находится в ионном содержимом, и если бы я сделал это таким образом, кнопка также была бы показана на всех других слайдах.

Edit:

TL; DR Обходной путь:

@ViewChild('slides', {read: IonSlides}) slides: IonSlides; в файле .ts

Использовать событие (ionSlideReachEnd)="onEnd()" в <ion-slides> в .html

onEnd() {
  this.slides.isEnd().then(endReached => { 
  this.reachedEnd = endReached // reachedEnd is a variable that can be checked in the html file
}

Я использовал обходной путь, пока не нашел правильное решение. Я использую приведенный выше код, чтобы проверить, достиг ли я конца моих слайдов. После этого я отображаю нижний колонтитул с кнопкой. Нижний колонтитул наклеивается внизу страницы, а не на слайды, как я хочу. Дополнительным бонусом является то, что теперь у пользователя всегда есть возможность подать заявку на любом слайде при просмотре своих ответов.

Answer 1

Простой * ngIf может сделать эту работу за вас ... поэтому мы поставили условие, что кнопка будет видна только на последнем слайде, мы знаем, что индекс массива последнего слайда будет равен длине массив -1 ... отсюда ставим условие: <ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full">Submit</ion-button>

релевантно HTML :

<ion-content padding>

    <ion-slides>
        <ion-slide *ngFor="let question of questions; let idx = index">
            <ion-card>
                <h1>Questions Overview</h1>
                <ion-list>
                    <ion-item>
                        <ion-label>
                            Question: {{ question.question }}
                        </ion-label>
                    </ion-item>
                    <ion-item>
                        <ion-label>
                            Your Answer: {{ question.answer }}
                        </ion-label>
                    </ion-item>
                </ion-list>
                <ion-button *ngIf='idx==questions.length-1' (click)="onSubmit()" expand="full" style='border:2px solid red;padding:5px; margin:5px; background:lightpink; position: absolute; bottom: 0%; left:50%; margin-left:-17px'>Submit</ion-button>
            </ion-card>
        </ion-slide>
    </ion-slides>

</ion-content>

проверьте вкладку about на рабочем стеке бликов здесь