Skip to main content

虚拟滚动

🌐 Virtual Scroll

在找 ion-virtual-scroll 吗？

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

安装​

🌐 Installation

要设置 CDK Scroller，首先安装 @angular/cdk：

🌐 To setup the CDK Scroller, first install @angular/cdk:

npm add @angular/cdk

这提供了一系列不同的实用工具，但我们现在将重点关注 ScrollingModule。

🌐 This provides a collection of different utilities, but we'll focus on ScrollingModule for now.

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

🌐 When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the tabs1.module.ts file.

  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 组件中的虚拟滚动条了。

🌐 With this added, we have access to the Virtual Scroller in the Tab1Page component.

用法​

🌐 Usage

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

🌐 The CDK Virtual Scroller can be added to a component by adding the cdk-virtual-scroll-viewport to a component's template.

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

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

此时的 DOM 节点可以是应用所需的任何内容。区别在于，当我们想要遍历一个集合时，使用 *cdkVirtualFor 而不是 *ngFor。

🌐 The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, *cdkVirtualFor is used instead of *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 虚拟滚动文档。

🌐 Here, items is an array, but it can be an array, Observable<Array>, or DataSource. DataSource is an abstract class that can provide the data needed as well as utility methods. For more details, check out the CDK Virtual Scrolling docs.

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

🌐 The component is not complete yet as the cdk-virtual-scroll-viewport needs to know how big each node will be as well as the min/max buffer sizes.

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

🌐 At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the Tab1Page component, since it is only rendering an item, it can be hard-coded to a fixed size.

最小/最大缓冲区大小告诉滚动器“渲染足够的节点以达到此最小高度，但不要超过此高度”。

🌐 The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this".

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

在这种情况下，cdk-virtual-scroll-viewport 将以 56px 的高度渲染单元格，直到达到 900px 的高度，但在 1350px 时不再增加。这些数字是任意的，因此请务必测试哪些值在实际使用中有效。

🌐 For this case, the cdk-virtual-scroll-viewport will render cells at a height 56px until it reaches a height of 900px, but no more at 1350px. These numbers are arbitrary, so be sure to test out what values will work in a real use case.

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

🌐 Putting everything together, the final HTML should look like:

<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 文件中，添加以下内容

🌐 The last piece needed is a some CSS to size the viewport correctly. In the tab1.page.scss file, add the following

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

由于视口是为了适应各种用例而构建的，因此默认大小并未设置，而是由开发者设置。

🌐 Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set.

与 Ionic 组件一起使用​

🌐 Usage with Ionic Components

Ionic 框架要求像可折叠大标题、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 这样的功能必须在 ion-content 中使用。要在虚拟滚动中使用这些功能，必须向虚拟滚动视口添加 .ion-content-scroll-host 类。

🌐 Ionic Framework requires that features such as collapsible large titles, ion-infinite-scroll, ion-refresher, and ion-reorder-group be used within an ion-content. To use these experiences with virtual scrolling, you must add the .ion-content-scroll-host class to the virtual scroll viewport.

例如：

🌐 For example:

<ion-content [scrollY]="false">
  <cdk-virtual-scroll-viewport class="ion-content-scroll-host">
    
  </cdk-virtual-scroll-viewport>
</ion-content>

进一步阅读​

🌐 Further Reading

这只涵盖了 CDK 虚拟滚动器功能的一小部分。欲了解更多详情，请参阅 Angular CDK 虚拟滚动文档。

🌐 This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the Angular CDK Virtual Scrolling docs.

目录