Skip to main content

虚拟滚动

🌐 Virtual Scroll

在找 ion-virtual-scroll 吗？

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

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

🌐 One virtual scrolling solution to consider for your Ionic React app is Virtuoso. This guide will go over how to install Virtuoso into your Ionic React application and use it with other Ionic components.

安装​

🌐 Installation

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

🌐 To setup the virtual scroller, first install react-virtuoso:

npm install react-virtuoso

用法​

🌐 Usage

Virtuoso 包含一些组件，但此示例将使用 Virtuoso 组件。此组件应添加在你的 IonContent 组件内部：

🌐 There are a few components that Virtuoso includes, but this example will use the Virtuoso component. This component should be added inside of your IonContent component:

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%' }} 来实现。

🌐 After adding the Virtuoso component to our page, we need to define the size of the virtual scroll container. In this case, we want the container to take up the full height of the screen which we can do by adding style={{ height: '100%' }}.

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

🌐 Next, we want to define the total number of items to render via the totalCount property.

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

🌐 From there, we can use the itemContent property to pass a function that will be called to render each item in our virtual scroll content.

这里需要注意的一件重要事情是封装我们 IonItem 组件的 div。在懒加载 Ionic 组件时，可能会出现一些帧期间组件已加载但样式尚未加载的情况。当发生这种情况时，组件的尺寸将是 0，Virtuoso 可能会抛出错误。这是因为 Virtuoso 需要为其渲染的每个项目确定独立的位置，而当组件的尺寸为 0 时，它无法确定。

🌐 An important thing to note here is the div that wraps our IonItem component. When lazy loading Ionic components, there may be a few frames where the component is loaded but the styles have not loaded in. When this happens, the component's dimension will be 0, and Virtuoso may throw an error. This is because Virtuoso needs distinct positions for each item it renders, and it cannot determine that when a component's dimension is 0.

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

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

进一步阅读​

🌐 Further Reading

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

🌐 This guide only covers a small portion of what Virtuoso is capable of. For more details, please see the Virtuoso documentation.

目录