Question

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

我尝试了以下操作：

使用不粘手的ion-fab-button。
将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时，我只发现了有关离子含量以外的按钮的问题和解答。这无济于事，因为页面上使用的所有内容都包含在离子含量中，如果我这样做，该按钮也将显示在所有其他幻灯片上。

编辑：

TL; DR解决方法：

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

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

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>

在working stackblitz here

上查看“关于”标签

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

1 个答案: