Skip to main content

虚拟滚动

¥Virtual Scroll

ion-virtual-scroll?寻找

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

¥ion-virtual-scroll was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the @angular/cdk package detailed below.

安装​

¥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 Scroller 时，我们需要在组件中导入该模块。例如，在选项卡启动项目中，我们可以将导入添加到 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 Virtual Scroller 添加到组件。

¥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 节点滚动到视图之外时回收它们。

¥cdk-virtual-scroll-viewport becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view.

此时的 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 Virtual Scroller 仅支持固定大小的元素，但未来计划支持动态大小的元素。对于 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 将以 56 像素的高度渲染单元格，直到达到 900 像素的高度，但在 1350 像素时不再渲染。这些数字是任意的，因此请务必测试哪些值适用于实际用例。

¥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 Framework 要求在 ion-content 中使用可折叠大标题、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 等功能。要通过虚拟滚动使用这些体验，你必须将 .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">
    <!-- Your existing content and configurations -->
  </cdk-virtual-scroll-viewport>
</ion-content>

进一步阅读​

¥Further Reading

这仅涵盖了 CDK Virtual Scroller 功能的一小部分。欲了解更多详情，请参阅 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.

目录