跳至主要內容
版本：v8

虛擬滾動

正在尋找 ion-virtual-scroll 嗎？

ion-virtual-scroll 在 v6.0.0 中已棄用，並在 v7.0.0 中移除。我們建議使用 Vue 函式庫來完成此操作。我們在下面概述了一種使用 vue-virtual-scroller 的方法。

安裝​

要設定虛擬滾動器，請先安裝 vue-virtual-scroller

npm install vue-virtual-scroller@next
注意

請務必使用 next 標籤，否則您將獲得一個僅與 Vue 2 相容的 vue-virtual-scroll 版本。

從這裡，我們需要將虛擬滾動器的 CSS 匯入我們的應用程式。在 main.ts 中，新增以下這行

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

註冊虛擬滾動元件​

現在我們已經安裝了套件並匯入了 CSS，我們可以匯入所有虛擬滾動元件，也可以只匯入我們想要使用的元件。本指南將說明如何執行這兩種操作。

安裝所有元件​

要安裝所有虛擬滾動元件以便在您的應用程式中使用，請將以下匯入新增至 main.ts

import VueVirtualScroller from 'vue-virtual-scroller';

接下來，我們需要在我們的 Vue 應用程式中安裝它

app.use(VueVirtualScroller);

完成此操作後，所有虛擬滾動元件都可以在我們的應用程式中使用。

注意

安裝所有元件可能會導致未使用的虛擬滾動元件被新增至您的應用程式套件。有關更好地與搖樹最佳化搭配使用的方法，請參閱下面的安裝特定元件章節。

安裝特定元件​

要安裝特定的虛擬滾動元件以便在您的應用程式中使用，請在 main.ts 中匯入您想要使用的元件。在本範例中，我們將使用 RecycleScroller 元件

import { RecycleScroller } from 'vue-virtual-scroller';

接下來，我們需要將元件新增至我們的 Vue 應用程式

app.component('RecycleScroller', RecycleScroller);

完成此操作後，我們將能夠在我們的應用程式中使用 RecycleScroller 元件。

使用方式​

本範例將使用 RecycleScroller 元件，該元件只會呈現清單中可見的項目。當您事先不知道項目的大小時，可以使用其他元件，例如 DynamicScroller。

RecycleScroller 元件應新增至您的 ion-content 元件內

<template>
  <ion-page>
    <ion-content>
      <ion-list>
        <RecycleScroller class="scroller" :items="list" :item-size="56">
          <template #default="{ item }">
            <ion-item>
              <ion-avatar slot="start">
                <img src="https://picsum.photos/seed/picsum/40/40" />
              </ion-avatar>
              <ion-label>{{ item }}</ion-label>
            </ion-item>
          </template>
        </RecycleScroller>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script>
  import { defineComponent, ref } from 'vue';
  import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';

  export default defineComponent({
    components: {
      IonAvatar,
      IonContent,
      IonItem,
      IonLabel,
      IonPage,
    },
    setup() {
      const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

      return { list };
    },
  });
</script>

要使 RecycleScroller 正常運作，我們需要考慮兩個重要的部分。首先，我們需要透過 items 屬性向它提供一個要反覆運算的資料陣列。在本例中，我們有一個名為 list 的陣列，可提供我們的資料。其次，我們需要透過 item-size 屬性提供每個節點的大小。如果您事先不知道節點的大小，則應改用 DynamicScroller 元件。

現在我們的範本已設定完成，我們需要新增一些 CSS 以正確調整虛擬滾動檢視區的大小。在您元件的 style 標籤中，新增以下內容

.scroller {
  height: 100%;
}

與 Ionic 元件一起使用​

Ionic Framework 要求可折疊的大標題、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 等功能必須在 ion-content 內使用。若要將這些體驗與虛擬滾動搭配使用，您必須將 .ion-content-scroll-host 類別新增至虛擬滾動檢視區。

例如

<template>
  <ion-page>
    <ion-content :scroll-y="false">
      <RecycleScroller class="ion-content-scroll-host scroller">
        <!-- Your existing content and configurations -->
      </RecycleScroller>
    </ion-content>
  </ion-page>
</template>

進一步閱讀​

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

目錄

編輯此頁面