Question

我正在开发ionic 4应用程序，并且创建了一个弹出窗口。在此弹出框内，我想使用ion-fub-button，该<ion-content> <ion-fab vertical="top" horizontal="end" slot="fixed"> <ion-fab-button (click)="getStats()"> <ion-icon id="closeBTN" name="stats" color="light"> </ion-icon> </ion-fab-button> </ion-fab> <div> ...... </div> </ion-content>必须固定在弹出框的右上角。

我编写的HTML代码如下：

ion-header

如您所见，我希望ion-fab-button应该保持固定在弹出窗口的右上角，但实际上它不是固定不变的，而是随内容的其余部分一起滚动。谁能告诉我为什么以及如何解决？

我也曾尝试将按钮插入离子头内，但position:fixed会与其余的弹出框一起滚动。而且我也尝试为此按钮使用css attron(A_BOLD)，但是它不起作用。

有人可以帮助我吗？

Answer 1

也许this link会为您提供帮助。就我而言，如果将ion-fab放在ion-content内部的自定义组件中，则固定属性无法正常工作。

Answer 2

这适用于我在 25-02-2021 使用 Ionic 5

html

 <div class="fixed">

        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
          <ion-fab-button size="small">
            <ion-icon name="camera"></ion-icon>
          </ion-fab-button>
        </ion-fab>

      </div>

css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

为什么ion-fab-button不能在ionic 4 Popover内部保持固定？

2 个答案: