虚拟滚动
你可以为你的Ionic Vue应用考虑一个虚拟滚动解决方案betway东盟体育app
vue-virtual-scroller
．本指南将介绍如何安装
vue-virtual-scroller
加入您的离子Vue应betway东盟体育app用程序，并与其他离子组件一起使用。
安装
要设置虚拟滚轮，首先安装
vue-virtual-scroller
：
npm
安装
vue-virtual-scroller@next
:::注:请务必使用
下一个
标签，否则将得到
vue-virtual-scroll
仅与Vue 2兼容。从这里，我们需要导入虚拟滚轮的CSS到我们的应用程序
main.ts
，添加以下行:
进口
“vue-virtual-scroller / dist / vue-virtual-scroller.css”
；注册虚拟滚动组件
现在我们已经安装了这个包并导入了CSS，我们可以导入所有的虚拟滚动组件或者只导入我们想要使用的组件。本指南将展示如何做到这两点。
安装所有组件
要安装所有虚拟滚动组件使用你的应用程序，添加以下导入
main.ts
：
进口
VueVirtualScroller
从
“vue-virtual-scroller”
；接下来，我们需要在Vue应用程序中安装它:
应用程序
．
使用
（
VueVirtualScroller
）
；这样做之后，所有的虚拟滚动组件都可以在我们的应用程序中使用。
注意:安装所有组件可能会导致未使用的虚拟滚动组件被添加到你的应用程序包中。看到 安装特定的组件 小节介绍一种更适用于摇树的方法。：：：
安装特定的组件
要在你的应用程序中安装特定的虚拟滚动组件，导入你想要使用的组件
main.ts
．在本例中，我们将使用
RecycleScroller
组件:
进口
｛
RecycleScroller
｝
从
“vue-virtual-scroller”
；接下来，我们需要将组件添加到Vue应用程序中:
应用程序
．
组件
（
“RecycleScroller”
，
RecycleScroller
）
；
这样做之后，我们就可以使用
RecycleScroller
组件。
使用
这个例子将使用
RecycleScroller
组件，该组件仅呈现列表中的可见项。其他组件，如
DynamicScroller
可以在事先不知道物品大小的情况下使用。
的
RecycleScroller
组件应该添加到您的
离子含量
组件:
<
模板
>
<
ion-page
>
<
离子含量
>
<
ion-list
>
<
RecycleScroller
类
＝
＂
照片卷轴
＂
:项目
＝
＂
列表
＂
:项目大小
＝
＂
56
＂
>
<
模板
#默认
＝
＂
{项}
＂
>
<
ion-item
>
<
ion-avatar
槽
＝
＂
开始
＂
>
<
img
src
＝
＂
https://picsum.photos/seed/picsum/40/40
＂
/>
ion-avatar
>
<
ion-label
>
{{项}}
ion-label
>
ion-item
>
模板
>
RecycleScroller
>
ion-list
>
离子含量
>
ion-page
>
模板
>
<
脚本
>
进口
｛
defineComponent
，
裁判
｝
从
“vue”
；
进口
｛
IonAvatar
，
IonContent
，
IonItem
，
IonLabel
，
IonPage
｝
从
“@betway东盟体育appionic / vue”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonAvatar
，
IonContent
，
IonItem
，
IonLabel
，
IonPage
｝
，
设置
（
）
｛
常量
列表
＝
裁判
（
［
0
，
1
，
2
，
3.
，
4
，
5
，
6
，
7
，
8
，
9
，
10
］
）
；
返回
｛
列表
｝
｝
｝
）
；
脚本
>
有两件重要的事我们需要解释清楚
RecycleScroller
去工作。首先，我们需要为它提供一个数据数组，以便通过
项目
财产。在这个例子中，我们有一个数组叫做
列表
它提供了我们的数据。其次，我们需要提供每个节点的大小通过
项目大小
财产。如果事先不知道节点的大小，则应该使用
DynamicScroller
组件。
现在模板已经设置好了，我们需要添加一些CSS来正确地调整虚拟滚动视口的大小。在一个
风格
标签，添加以下内容:
.scroller
｛
高度
：
100％
；
｝关于离子成分的说明betway东盟体育app
离子框架的某些功betway东盟体育app能目前不兼容虚拟滚动。例如可折叠的大标题，
ion-infinite-scroll
,
ion-refresher
依赖于能够滚动
离子含量
本身，因此不能工作时，使用虚拟滚动。
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。你可以在这里跟踪进度并给出反馈: https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437 ．
进一步的阅读
本指南只涵盖了其中的一小部分
vue-virtual-scroller
有能力。欲知更多详情，请参阅
vue-virtual-scroller文档
．