Skip to main content

虚拟滚动

🌐 Virtual Scroll

在找 ion-virtual-scroll 吗？

ion-virtual-scroll 在 v6.0.0 中已被弃用，并在 v7.0.0 中移除。我们建议使用 Vue 库来实现这一功能。下面我们概述了一种使用 vue-virtual-scroller 的方法。

安装​

🌐 Installation

要设置虚拟滚动器，首先安装 vue-virtual-scroller：

🌐 To setup the virtual scroller, first install vue-virtual-scroller:

npm install vue-virtual-scroller@next
note

确保使用 next 标签，否则你将获得一个仅与 Vue 2 兼容的 vue-virtual-scroll 版本。

从这里，我们需要将虚拟滚动器的 CSS 导入到我们的应用中。在 main.ts 中，添加以下行：

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

注册虚拟滚动组件​

🌐 Registering Virtual Scroll Components

既然我们已经安装了包并导入了 CSS，我们可以选择导入所有虚拟滚动组件，或者仅导入我们想使用的组件。本指南将展示如何两者都做。

🌐 Now that we have the package installed and the CSS imported, we can either import all virtual scroll components or only import the components we want to use. This guide will show how to do both.

安装所有组件​

🌐 Installing all Components

要在你的应用中安装所有虚拟滚动组件，请将以下导入添加到 main.ts：

🌐 To install all virtual scroll components for use your app, add the following import to main.ts:

import VueVirtualScroller from 'vue-virtual-scroller';

接下来，我们需要将其安装到我们的 Vue 应用中：

🌐 Next, we need to install this in our Vue application:

app.use(VueVirtualScroller);

完成此操作后，所有虚拟滚动组件都可以在我们的应用中使用。

🌐 After doing this, all virtual scroll components will be available for use in our app.

note

安装所有组件可能会导致未使用的虚拟滚动组件被添加到你的应用包中。请参阅下面的安装特定组件部分，以获取更适合树摇优化的方法。

安装特定组件​

🌐 Installing Specific Components

要在应用中安装特定的虚拟滚动组件，请在 main.ts 中导入要使用的组件。在此示例中，我们将使用 RecycleScroller 组件：

🌐 To install specific virtual scroll components for use in your app, import the component you want to use in main.ts. In this example, we will be using the RecycleScroller component:

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

接下来，我们需要将该组件添加到我们的 Vue 应用中：

🌐 Next, we need to add the component to our Vue application:

app.component('RecycleScroller', RecycleScroller);

在完成此操作后，我们将能够在我们的应用中使用 RecycleScroller 组件。

🌐 After doing this, we will be able to use the RecycleScroller component in our app.

用法​

🌐 Usage

这个示例将使用 RecycleScroller 组件，它只渲染列表中可见的项目。当你事先不知道项目的大小时，可以使用其他组件，例如 DynamicScroller。

🌐 This example will use the RecycleScroller component which only renders the visible items in your list. Other components such as DynamicScroller can be used when you do not know the size of the items in advance.

RecycleScroller 组件应该添加在你的 ion-content 组件内部：

🌐 The RecycleScroller component should be added inside of your ion-content component:

<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 setup lang="ts">
import { ref } from 'vue';
import { IonAvatar, IonContent, IonItem, IonLabel, IonPage } from '@ionic/vue';

const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
</script>

为了让 RecycleScroller 正常工作，我们需要考虑两个重要的部分。首先，我们需要通过 items 属性为它提供一个用于迭代的数据数组。在这种情况下，我们有一个名为 list 的数组，它提供了我们的数据。其次，我们需要通过 item-size 属性提供每个节点的大小。如果你事先不知道节点的大小，你应该使用 DynamicScroller 组件。

🌐 There are two important pieces we need to account for in order for RecycleScroller to work. First, we need to provide it with an array of data to iterate over via the items property. In this case, we have an array called list which provides our data. Second, we need to provide the size of each node via the item-size property. If you do not know the size of the node ahead of time, you should use the DynamicScroller component instead.

现在我们的模板已经设置好了，我们需要添加一些 CSS 来正确设置虚拟滚动视口的大小。在你组件中的 style 标签内，添加以下内容：

🌐 Now that our template is setup, we need to add some CSS to size the virtual scrolling viewport correctly. In a style tag in your component, add the following:

.scroller {
  height: 100%;
}

与 Ionic 组件一起使用​

🌐 Usage with Ionic Components

Ionic 框架要求像可折叠大标题、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 这样的功能必须在 ion-content 中使用。要在虚拟滚动中使用这些功能，必须向虚拟滚动视口添加 .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:

<template>
  <ion-page>
    <ion-content :scroll-y="false">
      <RecycleScroller class="ion-content-scroll-host scroller">
        
      </RecycleScroller>
    </ion-content>
  </ion-page>
</template>

进一步阅读​

🌐 Further Reading

本指南仅涵盖了 vue-virtual-scroller 功能的一小部分。欲了解更多详细信息，请参阅 vue-virtual-scroller 文档。

🌐 This guide only covers a small portion of what vue-virtual-scroller is capable of. For more details, please see the vue-virtual-scroller documentation.

目录