Css 离子型：在特定离子载玻片底部的粘性按钮

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

我尝试了以下方法：

• 使用不会粘住的ion fab按钮

• 在按钮上使用CSS和“位置：粘滞！重要；”

• 将除按钮外的所有内容包装在离子卡内容中

---

在找到合适的解决方案之前，我一直在使用变通方法。我使用上面使用的代码检查我是否已到达幻灯片的结尾。在此之后，我显示一个包含按钮的离子页脚。页脚粘在页面底部，而不是我想要的幻灯片上。额外的好处是，现在用户在查看答案时，始终能够在任何幻灯片上提交答案。

一个简单的*ngIf可以为您完成这项工作。。。所以我们假设按钮只在最后一张幻灯片上可见，我们知道最后一张幻灯片的数组索引将等于数组的长度-1。。。因此我们设置了条件：

Submit

相关的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>

问题概述
问题：{{问题.问题}
你的答案：{{question.Answer}
提交

---

查看

上的“关于”选项卡，谢谢您的回答，但这并不能回答我的问题。我想把按钮粘在页面底部，就像粘在ion页脚上一样，但只粘在最后一张幻灯片上。@PatrickJung，嗨，看一下更新的stackblitz。。。相关行是：

Submit

这将为您解决

Submit

。。。它在不同的决议上为我工作。。。如果出现任何样式问题，您可以分享屏幕截图吗？您的可滚动问题也在更新的stackblitz代码中得到解决。。。它现在对你有用吗？你能帮我完成stackblitz（）吗。。。然后进行更改，以便我们进行故障排除

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

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