原本 Ionic 有 ion-virtual-scroll 可使用，但到了 Ionic v7.0.0 已經刪除了，官方建議使用 vue-virtual-scroller ，想了解更多可以參考 vue-virtual-scroller 的文件。

Virtual Scroll

什麼是 Virtual Scroll？

Virtual Scroll 是一種前端優化技術。當我們在頁面上有大量的數據，如果有一個很長的列表或 v-for 數據等，在手機上其實只有一小部分的數據會呈現在使用者可見的螢幕區域，Virtual Scroll 的作用為的就是只渲染當前可見的項目，並在使用者拉動或滑動螢幕時動態渲染新的項目。這是為了避免渲染大量不在畫面中的數據而造成效能降低，這樣的方式大大提高了性能。

vue-virtual-scroller 介紹

vue-virtual-scroller 是一個 Vue.js 的 plugin，用來實現 ”Virtual Scroll“，vue-virtual-scroller 提供了幾個重要的組件：

• RecycleScroller：用來渲染畫面列表中可視範圍的組件。也因重用組件和 DOM 元素的特性，可以達到最高的效率和性能，且滑動畫面無延遲。

• DynamicScroller：由於使用 RecycleScroller 要事先規劃 item 的筆數，若不知道 item 筆數，可以使用 DynamicScroller，能動態管理 item 筆數。DynamicScroller 會在滑動畫面時渲染新數據，自動“發現” 數據的大小。

DynamicScrollerItem：必須包在 DynamicScroller中，以處理數據大小的計算。

IdState：這是一個混合型組件，簡化了在 RecycleScroller 內重複使用的組件中的本地狀態管理。

使用 Virtual Scroll 來優化多筆數據的渲染可以有效的提高性能，也能提升使用者體驗。

vue-virtual-scroller 下載與設定

• 使用 npm 下載

npm install vue-virtual-scroller@next

• 將 vue-virtual-scroller 導入到 app 中，在 main.js 中輸入

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

• 註冊 vue-virtual-scroller 所有的 component

import VueVirtualScroller from 'vue-virtual-scroller';
app.use(VueVirtualScroller);

• 若只想註冊特定組件，如RecycleScroller，可以在 main.js 輸入

import { RecycleScroller } from 'vue-virtual-scroller';
app.component('RecycleScroller', RecycleScroller);

這樣就可以在專案中使用瞜～來看一下官方範例程式碼

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

別忘了在 css 設定畫面高度

.scroller {
  height: 100%;
}