跳至主要内容
版本: 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-scroller 版本。

从这里，我们需要将虚拟滚动器的 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);

完成此操作后，所有虚拟滚动组件将可供我们在应用程序中使用。

注意

安装所有组件可能会导致未使用的虚拟滚动组件被添加到你的应用程序包中。有关与 treeshaking 协同工作更好的方法，请参阅下面的 安装特定组件 部分。

安装特定组件​

要安装特定虚拟滚动组件以供你的应用程序使用，请在 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 框架要求将可折叠的大标题、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 文档。

内容

编辑此页面