跳至主要内容
版本：v8

虚拟滚动

正在寻找 ion-virtual-scroll？

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

对于您的 Ionic React 应用程序，您可以考虑的一种虚拟滚动解决方案是 Virtuoso。本指南将介绍如何在您的 Ionic React 应用程序中安装 Virtuoso 并将其与其他 Ionic 组件一起使用。

安装​

要设置虚拟滚动器，首先安装 react-virtuoso

npm install react-virtuoso

用法​

Virtuoso 包含一些组件，但本示例将使用 Virtuoso 组件。此组件应添加到您的 IonContent 组件内部

import React from 'react';
import { Virtuoso } from 'react-virtuoso';
import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/react';
const Home: React.FC = () => (
  <IonPage>
    <IonContent>
      <Virtuoso
        style={{ height: '100%' }}
        totalCount={100}
        itemContent={(index) => {
          return (
            <div style={{ height: '56px' }}>
              <IonItem>
                <IonAvatar slot="start">
                  <img src="https://picsum.photos/seed/picsum/40/40" />
                </IonAvatar>
                <IonLabel>{index}</IonLabel>
              </IonItem>
            </div>
          );
        }}
      />
    </IonContent>
  </IonPage>
);
export default Home;

将 Virtuoso 组件添加到我们的页面后，我们需要定义虚拟滚动容器的大小。在本例中，我们希望容器占据屏幕的整个高度，这可以通过添加 style={{ height: '100%' }} 来实现。

接下来，我们希望通过 totalCount 属性定义要渲染的项目总数。

从那里，我们可以使用 itemContent 属性传递一个函数，该函数将被调用来渲染我们虚拟滚动内容中的每个项目。

这里需要注意的一点是包装我们 IonItem 组件的 div。当延迟加载 Ionic 组件时，可能会出现几帧，组件已加载但样式尚未加载。当这种情况发生时，组件的尺寸将为 0，Virtuoso 可能会抛出错误。这是因为 Virtuoso 需要每个它渲染的项目的不同位置，而当组件的尺寸为 0 时，它无法确定这一点。

与 Ionic 组件一起使用​

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

例如

<IonPage>
  <IonContent scrollY={false}>
    <Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
  </IonContent>
</IonPage>

进一步阅读​

本指南仅涵盖了 Virtuoso 能力的一小部分。有关更多详细信息，请参阅 Virtuoso 文档。

内容

编辑此页面