离子 cdk-虚拟滚动答案

【问题标题】：Ionic cdk-virtual-scroll离子 cdk-虚拟滚动
【发布时间】：2022-01-17 22:48:29
【问题描述】：

最近我将 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。这是正在发生的示例代码 sn-p：

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

如果有人有解决方案可以分享，那将有很大帮助。

【问题讨论】：

标签： android angular typescript ionic-framework

【解决方案1】：

我最近找到了一个解决方案，问题是我的cdk-virtual-scroll-viewport 位于ion-list 组件中。如果您碰巧遇到此问题，请检查您的滚动组件是否在 ion-list 内。

【讨论】：