跳到主要內容
版本：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 Framework 要求在 ion-content 中使用可摺疊的大標題、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 等功能。若要將這些體驗與虛擬捲動一起使用，您必須將 .ion-content-scroll-host 類別新增至虛擬捲動視窗。

例如

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

延伸閱讀​

本指南僅涵蓋 Virtuoso 功能的一小部分。如需更多詳細資訊，請參閱 Virtuoso 文件。

目錄

編輯此頁面