Skip to main content

虚拟滚动

¥Virtual Scroll

ion-virtual-scroll?寻找

ion-virtual-scroll 在 v6.0.0 中已弃用，并在 v7.0.0 中删除。我们建议使用 Vue 库来完成此任务。我们在下面概述了一种使用 vue-virtual-scroller 的方法。

¥ion-virtual-scroll was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using vue-virtual-scroller below.

安装​

¥Installation

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

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

npm install vue-virtual-scroller@next
注意

请务必使用 next 标签，否则你将得到仅与 Vue 2 兼容的 vue-virtual-scroll 版本。

¥Be sure to use the next tag otherwise you will get a version of vue-virtual-scroll that is only compatible with Vue 2.

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

¥From here, we need to import the virtual scroller's CSS into our app. In main.ts, add the following line:

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.

注意

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

¥Installing all components may result in unused virtual scroll components being added to your application bundle. See the Installing Specific Components section below for an approach that works better with treeshaking.

安装特定组件​

¥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>
  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 组件。

¥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 Framework 要求在 ion-content 中使用可折叠大标题、ion-infinite-scroll、ion-refresher 和 ion-reorder-group 等功能。要通过虚拟滚动使用这些体验，你必须将 .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">
        <!-- Your existing content and configurations -->
      </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.

目录