為什么 ion-fab-button 不能固定在 ionic 4 popover 中？

Question

我正在開發一個 ionic 4 應用程序，並創建了一個彈出窗口。 在這個彈出窗口中，我想使用一個ion-fub-button ，它必須固定在彈出窗口的右上角位置。

我寫的 HTML 代碼是這樣的：

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

如您所見，我希望 ion-fab-button 應該固定在彈出窗口的右上角位置，但實際上它並沒有保持固定，而是隨其余內容一起滾動。 誰能告訴我為什么以及如何解決它？

我還嘗試將按鈕插入到 ion-header 中，但ion-header也會隨着 popover 的其余部分滾動。 而且我還嘗試使用 css position:fixed用於此按鈕，但它不起作用。

有人可以幫助我嗎？

Answer 1

也許這個鏈接會對你有所幫助。 就我而言，如果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;
}