虚拟滚动
过去，我们提供了一个
离子虚拟滚动
离子框架中的组件，以帮助列betway东盟体育app出虚拟化。当时没有角度，但最近角度已经通过了自己的解决方案
@ Angular / CDK
包裹。
设置
要设置CDK滚动函数，请先安装
@ Angular / CDK
：
NPM.
添加
@ Angular / CDK
这提供了不同公用事业的集合，但我们将专注于
滚动模块
目前。
当我们想要使用CDK滚动函数时，我们需要在我们的组件中导入模块。例如，在标签启动项目中，我们可以添加我们的导入
Tabs1.module.ts.
文件。
从'@离子/角度'betway东盟体育app导入{ionicmodule};从'@ Angular / Core'导入{ngmodule};从'@ Angular / Common'导入{commonmodule};从“@ Angular / Forms”导入{FormsModule};从'./tab1.page'导入{tab1page};从'../explore-container/explore-container.module'导入{explorecontainercomponentmodule};+从“@ Angular / CDK /滚动”导入{滚动模块};从'./tab1-routing.module'导入{tab1pageroutingmodule};@nymodule（{imports：[ionbetway东盟体育appicmodule，commonmodule，formsmodule，explorecondainercomponentmodule，tab1pageroutingmodule，+ scrollingmodule]，声明：[tab1page]}）导出类tab1pagemodule {}使用此添加，我们可以访问Tab1Page组件中的虚拟滚动函数。
用法
可以通过添加CDK虚拟滚动票据通过添加到组件中
CDK-Virtual-Scroll-ViewPort
到组件的模板。
<
离子内容
>
<
CDK-Virtual-Scroll-ViewPort
>
CDK-Virtual-Scroll-ViewPort
>
离子内容
>
CDK-Virtual-Scroll-ViewPort
成为可滚动内容的根源，并负责回收DOM节点，因为它们滚动了视图。
此时的DOM节点可以是应用所需的任何内容。不同之处在于，当我们想要迭代集合时，
* cdkvirtualfor.
用而不是
* Ngfor.
。
<
离子内容
>
<
CDK-Virtual-Scroll-ViewPort
>
<
离子清单
>
<
离子项目
* cdkvirtualfor.
=
“
让项目项目
“
>
<
离子头像
投币口
=
“
开始
“
>
<
im
SRC.
=
“
https://loremflickr.com/40/40
“
/>
离子头像
>
<
离子标签
>
{{物品 }}
离子标签
>
离子项目
>
离子清单
>
CDK-Virtual-Scroll-ViewPort
>
离子内容
>
这里，
项目
是一个数组，但它可以是一个数组，
可观察的
， 要么
数据源
。
数据源
是一个抽象类，可以提供所需的数据以及实用方法。有关更多详细信息，请查看
CDK虚拟滚动文档
。
该组件尚未完整
CDK-Virtual-Scroll-ViewPort
需要知道每个节点的大小以及最小/最大缓冲区大小。
目前，CDK虚拟滚动函数仅支持固定大小的元素，但计划为将来计划动态大小的元素。为了
tab1page.
组件，因为它只是呈现项目，它可以将硬编码为固定大小。
min / max缓冲区大小告诉滚动函数“呈现为满足此最小高度的许多节点，但不符合此问题。
<
CDK-Virtual-Scroll-ViewPort
项目化
=
“
56.
“
minbufferpx.
=
“
900
“
maxbufferpx.
=
“
1350.
“
>
CDK-Virtual-Scroll-ViewPort
>
对于这种情况来说，
CDK-Virtual-Scroll-ViewPort
将在高度56px的高度呈现细胞，直到它达到900px的高度，但在1350px中不再升高。这些数字是任意的，因此请务必测试在真正用例中的工作值。
将所有内容放在一起，最终的HTML应该是如此：
<
离子内容
>
<
CDK-Virtual-Scroll-ViewPort
项目化
=
“
56.
“
minbufferpx.
=
“
900
“
maxbufferpx.
=
“
1350.
“
>
<
离子清单
>
<
离子项目
* cdkvirtualfor.
=
“
让项目项目
“
>
<
离子头像
投币口
=
“
开始
“
>
<
im
SRC.
=
“
https://loremflickr.com/40/40
“
/>
离子头像
>
<
离子标签
>
{{物品 }}
离子标签
>
离子项目
>
离子清单
>
CDK-Virtual-Scroll-ViewPort
>
离子内容
>
最后一件件需要正确尺寸的CSS。在里面
tab1.page.scs.
文件，添加以下内容
CDK-Virtual-Scroll-ViewPort
{
高度
：
100％
;
宽度
：
100％
;
}由于视口构建以适合各种用例，因此未设置默认调整，并达到开发人员。
关于离子组分的备忘录betway东盟体育app
某些离子框架功能betway东盟体育app目前与虚拟滚动不兼容。可折叠大型标题等功能，
离子无限滚动
， 和
离子复习
依靠能够滚动
离子内容
本身，并且在使用虚拟滚动时，因此不起作用。
我们正在努力提高这些组件与虚拟滚动解决方案之间的兼容性。您可以在此处遵循进度并在此处提供反馈： https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437 。
进一步阅读
这仅涵盖CDK虚拟滚动仪能够的一小部分。有关更多详细信息，请参阅 Angular CDK虚拟滚动文档 。