虚拟滚动/h1>
为您的离子Vue应用程序考虑的一种虚拟滚动解决方案是betway东盟体育app
vue-virtual-scroller/a>
。本指南将介绍如何安装
vue-virtual-scroller/code>
进入您的离子VUE应betway东盟体育app用程序,并将其与其他离子组件一起使用。/p>
安装/a>
要设置虚拟滚动器,请先安装
vue-virtual-scroller/code>
:/p>
NPM/span>
安装/span>
vue-virtual-scroller@next/code>
:::注意一定要使用
下一个/code>
标签否则您将获得一个版本
vue-virtual-scroll/code>
这仅与Vue 2兼容。在
main.ts/code>
,添加以下行:/p>
进口/span>
'vue-virtual-scroller/dist/vue-virtual-scroller.css'/span>
;/span>
注册虚拟滚动组件/a>
现在,我们已经安装了软件包并导入了CSS,我们可以导入所有虚拟滚动组件,或者仅导入要使用的组件。本指南将展示如何做两者。//p>
安装所有组件/a>
要安装所有用于使用应用程序的虚拟滚动组件,请将以下导入添加到
main.ts/code>
:/p>
进口/span>
vuevirtualscroller
从/span>
“ Vue-Virtual-Scroller”/span>
;/span>
接下来,我们需要将其安装在我们的VUE应用程序中:/p>
应用程序
。/span>
采用/span>
((/span>
vuevirtualscroller
)/span>
;/span>
执行此操作后,所有虚拟滚动组件都可以在我们的应用中使用。/p>
:::注意安装所有组件可能会导致未使用的虚拟滚动组件添加到您的应用程序捆绑包中。看到
安装特定组件/a>
下面的部分,用于与心形更好的方法。::://p>
安装特定组件/a>
要安装用于应用程序中的特定虚拟滚动组件,请导入要使用的组件
main.ts/code>
。在此示例中,我们将使用
回收滚动器/code>
零件:/p>
进口/span>
{//span>
回收滚动器
}//span>
从/span>
“ Vue-Virtual-Scroller”/span>
;/span>
接下来,我们需要将组件添加到我们的VUE应用程序中:/p>
应用程序
。/span>
零件/span>
((/span>
“回收滚动器”/span>
,,,,/span>
回收滚动器
)/span>
;/span>
这样做之后,我们将能够使用
回收滚动器/code>
我们的应用程序中的组件。/p>
用法/a>
此示例将使用
回收滚动器/code>
组件仅呈现列表中的可见项目。其他组件,例如
DynamicsCroller/code>
当您不知道项目的大小时,可以使用。/p>
这
回收滚动器/code>
应在您的内部添加组件
离子含量/code>
零件:/p>
<//span>
模板/span>
>//span>
<//span>
离子页/span>
>//span>
<//span>
离子含量/span>
>//span>
<//span>
离子列/span>
>//span>
<//span>
回收滚动器/span>
班级/span>
=//span>
“/span>
滚动器
“/span>
:项目/span>
=//span>
“/span>
列表
“/span>
:项目大小/span>
=//span>
“/span>
56
“/span>
>//span>
<//span>
模板/span>
#默认/span>
=//span>
“/span>
{ 物品 }
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子 - 阿瓦塔尔/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://picsum.photos/seed/picsum/40/40
“/span>
/>/span>
//span>
离子 - 阿瓦塔尔/span>
>//span>
<//span>
离子标签/span>
>//span>
{{ 物品 }}
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
模板/span>
>//span>
//span>
回收滚动器/span>
>//span>
//span>
离子列/span>
>//span>
//span>
离子含量/span>
>//span>
//span>
离子页/span>
>//span>
//span>
模板/span>
>//span>
<//span>
脚本/span>
>//span>
进口/span>
{//span>
截然成分
,,,,/span>
参考
}//span>
从/span>
'vue'/span>
;/span>
进口/span>
{//span>
Ionavatar
,,,,/span>
离子体
,,,,/span>
离子
,,,,/span>
离子标签
,,,,/span>
离子页
}//span>
从/span>
'@betway东盟体育appionic/vue'/span>
;/span>
出口/span>
默认/span>
截然成分/span>
((/span>
{//span>
组件
:/span>
{//span>
Ionavatar
,,,,/span>
离子体
,,,,/span>
离子
,,,,/span>
离子标签
,,,,/span>
离子页
}//span>
,,,,/span>
设置/span>
((/span>
)/span>
{//span>
const/span>
列表
=//span>
参考/span>
((/span>
[[//span>
0/span>
,,,,/span>
1/span>
,,,,/span>
2/span>
,,,,/span>
3/span>
,,,,/span>
4/span>
,,,,/span>
5/span>
,,,,/span>
6/span>
,,,,/span>
7/span>
,,,,/span>
8/span>
,,,,/span>
9/span>
,,,,/span>
10/span>
这是给予的//span>
)/span>
;/span>
返回/span>
{//span>
列表
}//span>
}//span>
}//span>
)/span>
;/span>
//span>
脚本/span>
>//span>
我们需要考虑两个重要的部分以便
回收滚动器/code>
去工作。首先,我们需要为其提供一系列数据以通过
项目/code>
财产。在这种情况下,我们有一个名为
列表/code>
提供我们的数据。其次,我们需要通过
项目大小/code>
财产。如果您不提前知道节点的大小,则应使用
DynamicsCroller/code>
组件。/p>
现在,我们的模板已经设置了,我们需要添加一些CSS以正确尺寸虚拟滚动视口。在一个
风格/code>
在组件中标记,添加以下内容:/p>
.scroller/span>
{//span>
高度/span>
:/span>
100%
;/span>
}//span>
关于离子成分的注释betway东盟体育app/a>
某些离子框架功能betway东盟体育app当前与虚拟滚动不兼容。诸如可折叠大标题之类的功能,
离子侵入式滚动/code>
, 和
离子消失/code>
依靠能够滚动
离子含量/code>
本身,因此,使用虚拟滚动时将无效。/p>
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。您可以遵循进度并在此处提供反馈:
https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437/a>
。/p>
进一步阅读/a>
本指南仅涵盖了什么
vue-virtual-scroller/code>
有能力。有关更多详细信息,请参阅
VUE-VIRTUAL-SCROLLER文档/a>
。/p>
以前的/div>
导航/路由/span>
下一个/div>
幻灯片/span>
为您的离子Vue应用程序考虑的一种虚拟滚动解决方案是betway东盟体育app
vue-virtual-scroller/a>
。本指南将介绍如何安装
要设置虚拟滚动器,请先安装
:::注意一定要使用
现在,我们已经安装了软件包并导入了CSS,我们可以导入所有虚拟滚动组件,或者仅导入要使用的组件。本指南将展示如何做两者。//p>
要安装所有用于使用应用程序的虚拟滚动组件,请将以下导入添加到
接下来,我们需要将其安装在我们的VUE应用程序中:/p>
执行此操作后,所有虚拟滚动组件都可以在我们的应用中使用。/p>
:::注意安装所有组件可能会导致未使用的虚拟滚动组件添加到您的应用程序捆绑包中。看到
安装特定组件/a>
下面的部分,用于与心形更好的方法。::://p>
要安装用于应用程序中的特定虚拟滚动组件,请导入要使用的组件
接下来,我们需要将组件添加到我们的VUE应用程序中:/p>
这样做之后,我们将能够使用
此示例将使用
这
我们需要考虑两个重要的部分以便
现在,我们的模板已经设置了,我们需要添加一些CSS以正确尺寸虚拟滚动视口。在一个
某些离子框架功能betway东盟体育app当前与虚拟滚动不兼容。诸如可折叠大标题之类的功能,
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。您可以遵循进度并在此处提供反馈:
https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437/a>
。/p>
本指南仅涵盖了什么
vue-virtual-scroller/code>
进入您的离子VUE应betway东盟体育app用程序,并将其与其他离子组件一起使用。/p>
安装/a>
vue-virtual-scroller/code>
:/p>
NPM/span>
安装/span>
vue-virtual-scroller@next/code>
下一个/code>
标签否则您将获得一个版本
vue-virtual-scroll/code>
这仅与Vue 2兼容。在
main.ts/code>
,添加以下行:/p>
进口/span>
'vue-virtual-scroller/dist/vue-virtual-scroller.css'/span>
;/span>
注册虚拟滚动组件/a>
安装所有组件/a>
main.ts/code>
:/p>
进口/span>
vuevirtualscroller
从/span>
“ Vue-Virtual-Scroller”/span>
;/span>
应用程序
。/span>
采用/span>
((/span>
vuevirtualscroller
)/span>
;/span>
安装特定组件/a>
main.ts/code>
。在此示例中,我们将使用
回收滚动器/code>
零件:/p>
进口/span>
{//span>
回收滚动器
}//span>
从/span>
“ Vue-Virtual-Scroller”/span>
;/span>
应用程序
。/span>
零件/span>
((/span>
“回收滚动器”/span>
,,,,/span>
回收滚动器
)/span>
;/span>
回收滚动器/code>
我们的应用程序中的组件。/p>
用法/a>
回收滚动器/code>
组件仅呈现列表中的可见项目。其他组件,例如
DynamicsCroller/code>
当您不知道项目的大小时,可以使用。/p>
回收滚动器/code>
应在您的内部添加组件
离子含量/code>
零件:/p>
<//span>
模板/span>
>//span>
<//span>
离子页/span>
>//span>
<//span>
离子含量/span>
>//span>
<//span>
离子列/span>
>//span>
<//span>
回收滚动器/span>
班级/span>
=//span>
“/span>
滚动器
“/span>
:项目/span>
=//span>
“/span>
列表
“/span>
:项目大小/span>
=//span>
“/span>
56
“/span>
>//span>
<//span>
模板/span>
#默认/span>
=//span>
“/span>
{ 物品 }
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子 - 阿瓦塔尔/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://picsum.photos/seed/picsum/40/40
“/span>
/>/span>
//span>
离子 - 阿瓦塔尔/span>
>//span>
<//span>
离子标签/span>
>//span>
{{ 物品 }}
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
模板/span>
>//span>
//span>
回收滚动器/span>
>//span>
//span>
离子列/span>
>//span>
//span>
离子含量/span>
>//span>
//span>
离子页/span>
>//span>
//span>
模板/span>
>//span>
<//span>
脚本/span>
>//span>
进口/span>
{//span>
截然成分
,,,,/span>
参考
}//span>
从/span>
'vue'/span>
;/span>
进口/span>
{//span>
Ionavatar
,,,,/span>
离子体
,,,,/span>
离子
,,,,/span>
离子标签
,,,,/span>
离子页
}//span>
从/span>
'@betway东盟体育appionic/vue'/span>
;/span>
出口/span>
默认/span>
截然成分/span>
((/span>
{//span>
组件
:/span>
{//span>
Ionavatar
,,,,/span>
离子体
,,,,/span>
离子
,,,,/span>
离子标签
,,,,/span>
离子页
}//span>
,,,,/span>
设置/span>
((/span>
)/span>
{//span>
const/span>
列表
=//span>
参考/span>
((/span>
[[//span>
0/span>
,,,,/span>
1/span>
,,,,/span>
2/span>
,,,,/span>
3/span>
,,,,/span>
4/span>
,,,,/span>
5/span>
,,,,/span>
6/span>
,,,,/span>
7/span>
,,,,/span>
8/span>
,,,,/span>
9/span>
,,,,/span>
10/span>
这是给予的//span>
)/span>
;/span>
返回/span>
{//span>
列表
}//span>
}//span>
}//span>
)/span>
;/span>
//span>
脚本/span>
>//span>
回收滚动器/code>
去工作。首先,我们需要为其提供一系列数据以通过
项目/code>
财产。在这种情况下,我们有一个名为
列表/code>
提供我们的数据。其次,我们需要通过
项目大小/code>
财产。如果您不提前知道节点的大小,则应使用
DynamicsCroller/code>
组件。/p>
风格/code>
在组件中标记,添加以下内容:/p>
.scroller/span>
{//span>
高度/span>
:/span>
100%
;/span>
}//span>
关于离子成分的注释betway东盟体育app/a>
离子侵入式滚动/code>
, 和
离子消失/code>
依靠能够滚动
离子含量/code>
本身,因此,使用虚拟滚动时将无效。/p>
进一步阅读/a>
vue-virtual-scroller/code>
有能力。有关更多详细信息,请参阅
VUE-VIRTUAL-SCROLLER文档/a>
。/p>