离子：特定离子幻灯片底部的粘性按钮

Question

我正在生成一堆带有问题的幻灯片；最后一张幻灯片是对之前回答的问题的概述。在底部我有一个提交按钮，我希望在页面底部的（最后一张）幻灯片上始终可见。

我尝试了以下方法：

• 使用不粘的离子按钮。

• 将 CSS 与“位置：粘性！重要；”一起使用在按钮上

• 将除按钮之外的所有内容都包装在 ion-card-content 中

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

我在框架方面没有那么有经验，所以如果有其他我可以尝试的东西，我不会。

在使用谷歌时，我只发现了关于 ion-content 之外的按钮的问题和答案。这无济于事，因为页面上使用的所有内容都在 ion-content 中，如果我这样做，该按钮也将显示在所有其他幻灯片上。

编辑：

TL;DR 解决方法：

.ts 文件中的@ViewChild('slides', {read: IonSlides}) slides: IonSlides;

在 .html 中对 <ion-slides> 使用事件 (ionSlideReachEnd)="onEnd()"

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

在找到合适的解决方案之前，我已经使用了一种解决方法。我使用上面使用的代码来检查我是否已经到达幻灯片的末尾。在此之后，我显示一个包含按钮的 ion-footer。页脚粘在页面底部，而不是像我想要的那样粘在幻灯片上。额外的好处是，现在用户在查看他的答案时始终可以在任何幻灯片上提交。

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>

检查working stackblitz here上的关于标签