跳至主要内容
版本：v8

虚拟滚动

正在寻找 ion-virtual-scroll？

ion-virtual-scroll 已在 v6.0.0 中弃用，并在 v7.0.0 中删除。我们建议使用下面详细介绍的 @angular/cdk 包。

安装​

要设置 CDK 滚动条，首先安装 @angular/cdk

npm add @angular/cdk

这提供了一系列不同的工具，但我们现在将重点放在 ScrollingModule 上。

当我们想要使用 CDK 滚动条时，我们需要在我们的组件中导入该模块。例如，在一个标签启动项目中，我们可以在 tabs1.module.ts 文件中添加我们的导入。

  import { IonicModule } from '@ionic/angular';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { Tab1Page } from './tab1.page';
  import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+ import { ScrollingModule } from '@angular/cdk/scrolling';
  import { Tab1PageRoutingModule } from './tab1-routing.module';
  @NgModule({
    imports: [
      IonicModule,
      CommonModule,
      FormsModule,
      ExploreContainerComponentModule,
      Tab1PageRoutingModule,
+     ScrollingModule
    ],
    declarations: [Tab1Page]
  })
  export class Tab1PageModule {}

添加了这个之后，我们就可以在 Tab1Page 组件中访问虚拟滚动条了。

用法​

可以通过将 cdk-virtual-scroll-viewport 添加到组件的模板中，将 CDK 虚拟滚动条添加到组件中。

<ion-content>
  <cdk-virtual-scroll-viewport> </cdk-virtual-scroll-viewport>
</ion-content>

cdk-virtual-scroll-viewport 成为我们可滚动内容的根节点，负责在滚动内容移出视图时回收 DOM 节点。

此时，DOM 节点可以是应用程序所需的任何内容。不同之处在于，当我们想要迭代一个集合时，使用 *cdkVirtualFor 而不是 *ngFor。

<ion-content>
  <cdk-virtual-scroll-viewport>
    <ion-list>
      <ion-item *cdkVirtualFor="let item of items">
        <ion-avatar slot="start">
          <img src="https://loremflickr.com/40/40" />
        </ion-avatar>
        <ion-label> {{item }} </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

这里，items 是一个数组，但它可以是数组、Observable<Array> 或 DataSource。DataSource 是一个抽象类，可以提供所需的数据以及实用方法。有关更多详细信息，请查看 CDK 虚拟滚动文档。

该组件尚未完成，因为 cdk-virtual-scroll-viewport 需要知道每个节点的大小以及最小/最大缓冲区大小。

目前，CDK 虚拟滚动条只支持固定大小的元素，但动态大小的元素将在未来计划中推出。对于 Tab1Page 组件，由于它只渲染一个项目，因此可以将其硬编码为固定大小。

最小/最大缓冲区大小告诉滚动条“渲染尽可能多的节点以满足此最小高度，但不要超过此高度”。

<cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350"></cdk-virtual-scroll-viewport>

对于这种情况，cdk-virtual-scroll-viewport 将以 56px 的高度渲染单元格，直到它达到 900px 的高度，但不会超过 1350px 的高度。这些数字是任意的，因此请务必测试在真实用例中哪些值有效。

将所有内容组合在一起，最终的 HTML 应如下所示

<ion-content>
  <cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350">
    <ion-list>
      <ion-item *cdkVirtualFor="let item of items">
        <ion-avatar slot="start">
          <img src="https://loremflickr.com/40/40" />
        </ion-avatar>
        <ion-label> {{item }} </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

最后需要的是一些 CSS 来正确调整视窗大小。在 tab1.page.scss 文件中，添加以下内容

cdk-virtual-scroll-viewport {
  height: 100%;
  width: 100%;
}

由于视窗是为适应各种用例而构建的，因此默认的大小没有设置，开发者需要自行设置。

与 Ionic 组件一起使用​

Ionic Framework 要求可折叠的大标题、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 等功能在 ion-content 中使用。要在虚拟滚动中使用这些体验，必须将 .ion-content-scroll-host 类添加到虚拟滚动视窗中。

例如

<ion-content [scrollY]="false">
  <cdk-virtual-scroll-viewport class="ion-content-scroll-host">
    <!-- Your existing content and configurations -->
  </cdk-virtual-scroll-viewport>
</ion-content>

进一步阅读​

这仅涵盖了 CDK 虚拟滚动条功能的一小部分。有关更多详细信息，请参阅 Angular CDK 虚拟滚动文档。

目录

编辑此页面