Skip to main content

虚拟滚动

¥Virtual Scroll

ion-virtual-scroll?寻找

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

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

Virtuoso 是你的 Ionic React 应用需要考虑的一种虚拟滚动解决方案。本指南将介绍如何将 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 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:

<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.

目录