最近我將我的 ionic 專案中的所有 ion-virtual-scroll 組件替換為 cdk-virtual-scroll 和 Angular cdk，因為 ion-virtual-scroll 將在 ionic7 中被棄用。進行此更改后，我遇到了一個問題，即當我使用 cdk 滾動條時，最后一項與 android 上的軟按鈕重疊，您看不到最后一項。這是我在使用 ion-virtual-scroll 時沒有遇到的問題。我在網上沒有找到任何關于此的資訊，我想知道是否有人遇到此問題以及是否有人對此有解決方案。我嘗試直接在 ion-content 組件下使用 cdk-virtual-scroll（寬度為 100%，高度為 100%），并且還使用了 flex 和 flex-grow 1。這是一個正在發生的示例代碼片段：
<ion-content>
<cdk-virtual-scroll-viewport itemSize="48" minBufferPx="900" maxBufferPx="1350" style="width: 100%; height: 100%;">
<ng-container *ngIf="contacts$ | async as filteredContacts">
<ion-list *ngIf="filteredContacts" id="contacts" class="contacts-list">
<ion-item *ngIf="filteredContacts?.length === 0 else contactsPicker" translate>
CONTACTS.EMPTY_MESSAGE
</ion-item>
<ng-template #contactsPicker>
<ion-item-group>
<ion-item lines="none" [disabled]="(groupManagement$ | async) === false" (click)="createGroup($event)"
*ngIf="filteredContacts?.length">
<ion-avatar class="chat-avatar" slot="start">
<img src="assets/icons/group-icon.png">
</ion-avatar>
<ion-label color="tertiary">
<ion-grid class="contact-grid">
<ion-row class="contact-row">
<ion-col class="contact-col" size="10">
<h2 translate>CONTACTS.NEW_GROUP</h2>
</ion-col>
</ion-row>
</ion-grid>
</ion-label>
</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider>
<ion-label translate>CONTACTS.CONTACTS</ion-label>
</ion-item-divider>
<ion-list>
<ion-item *cdkVirtualFor="let contact of filteredContacts"
(click)="!contact.blocked && pickContact(contact)" id="{{contact.name}}"
data-cy="contactPickerListItem">
<ion-avatar class="chat-avatar" slot="start">
<img [src]="contact.avatar || defaultAvatar">
</ion-avatar>
<ion-label>
<ion-grid class="contact-grid">
<ion-row class="contact-row">
<ion-col class="contact-col" size="10">
<ion-text [color]="contact.blocked ? 'medium' : undefined">
<h2>{{ contact.name (contact.blocked ? '
(Blocked)' : '')}}</h2>
</ion-text>
</ion-col>
</ion-row>
</ion-grid>
</ion-label>
</ion-item>
</ion-list>
</ion-item-group>
</ng-template>
</ion-list>
</ng-container>
</cdk-virtual-scroll-viewport>
</ion-content>
如果有人有解決方案來分享，那將有很大幫助。
uj5u.com熱心網友回復：
我最近找到了一個解決方案，問題是我cdk-virtual-scroll-viewport在一個ion-list組件中。如果您碰巧遇到此問題，請檢查您的滾動組件是否位于ion-list.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/415347.html
標籤：