Ionic:帶有固定區域布局的可滾動區域 -有解無憂

我已經嘗試了不同的選項來完成這個布局，并在每種情況下都得到了一些問題：

用一個不可滾動的離子內容包住所有主要區域（黃色藍色），使藍色區域可滾動，用flexbox覆寫螢屏的其余部分。問題：無限滾動不能作業，因為它需要離子內容作為可滾動區域。我感覺這個布局不是很穩固，可能會出現意外。另外，從用戶體驗的角度來看，大多數用戶習慣于在整個螢屏上滾動，而不是只在某個區域滾動

。

在藍色區域周圍使用ion-content標簽。問題：頁眉和頁腳放錯了位置

我認為可能會有什么問題？

我認為這可能是最好的方法。在黃色和藍色區域周圍包裹ion-content，并使黃色區域浮動（slot="固定"）。問題是。我不想在藍色區域設定一個固定的上邊距，因為這個高度可能會根據使用的設備而改變。也許這可以通過編程來完成，但我更希望只用CSS來完成

。

另外，也許可以將黃色區域包含在ion-header中，但我發現這非常不靈活，而且難以組織。在這種情況下，標簽的標題將在ion-header中，而內容則在ion-content中，這在我看來是非常奇怪的。

有什么想法可以實作這個目標嗎？

uj5u.com熱心網友回復：

將固定的內容放入標題中，并將其包裹在一個子行中

<ion-header> 
    <ion-toolbar>/span>
        <ion-buttons slot="start"> 
            <ion-menu-button></ion-menu-button> 
        </ion-buttons>/span>
        <ion-title>頭部標題</ion-title>
    </ion-toolbar>/span>
    <ion-row class="filter-row"/span>>
        <ion-col>/span>
            <span>All</span>/span>
        </ion-col>/span>
        <ion-col>/span>
            <span>高</span>/span>
        </ion-col>/span>
        <ion-col>/span>
            <span>Medium</span>
        </ion-col>/span>
        <ion-col>/span>
            <span>Low</span>
        </ion-col>/span>
        <ion-col>/span>
            <span>無優先權</span>/span>
        </ion-col>/span>
    </ion-row>/span>
</ion-header>/span>

如果你不想把標簽放到頁眉中，這里是你可以使用的第二個解決方案

把固定的標簽和其他你想固定在頁眉下面頂部的東西包在一個div里，然后用這些css屬性給這個div添加位置粘性

 position: sticky;
    top: 0;
    z-index: 1;

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319151.html

標籤：

上一篇：如何在離子3中的離子專案中添加一個彩色的左上角的彎曲三角形

下一篇：離子范圍內的垃圾和充斥著控制臺，不作業