虚拟滚动/h1>
过去,我们提供了一个
离子虚拟卷/code>
离子框架中的组件可帮助列表betway东盟体育app虚拟化。当时这是不可用的,但最近Angular通过
@angular/cdk/code>
包裹。/p>
设置/a>
要设置CDK滚动器,请先安装
@angular/cdk/code>
:/p>
NPM/span>
添加/span>
@angular/cdk/code>
这提供了不同公用事业的集合,但我们将重点关注
滚动模块/code>
目前。/p>
当我们要使用CDK滚动器时,我们需要在组件中导入模块。例如,在标签启动器项目中,我们可以将导入添加到
tabs1.module.ts/code>
文件。/p>
从'@ionic/betway东盟体育appangular'导入{ionicModule};从'@angular/core'导入{ngmodule};从'@angular/common'导入{commonModule};从'@angular/forms'导入{formsModule};从'./tab1.page'导入{tab1page};从'../ explore-container/explore-container.module';+来自'@angular/cdk/scrolling'的导入{scrollingModule};从'./tab1-routing.module';导入{tab1pageroutingmodule};@ngmodule({imports:[ionbetway东盟体育appicModule,commonModule,formsModule,explorecontainerComponentModule,tab1pageroutingmodule, + scrollingModule],声明:[tab1page]})//code>
添加了此信息,我们可以访问TAB1PAGE组件中的虚拟滚动器。/p>
用法/a>
CDK虚拟滚动器可以通过添加来添加到组件中
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
到组件的模板。/p>
<//span>
离子含量/span>
>//span>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
离子含量/span>
>//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
成为我们可滚动内容的根源,并负责回收DOM节点,因为它们滚出了视线。/p>
此时,DOM节点可以是应用程序所需的任何内容。不同之处在于,当我们想迭代一个集合时,
*cdkvirtualfor/code>
使用而不是
*ngfor/code>
。/p>
<//span>
离子含量/span>
>//span>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
<//span>
离子列/span>
>//span>
<//span>
离子项目/span>
*cdkvirtualfor/span>
=//span>
“/span>
让项目
“/span>
>//span>
<//span>
离子 - 阿瓦塔尔/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://loremflickr.com/40/40
“/span>
/>/span>
//span>
离子 - 阿瓦塔尔/span>
>//span>
<//span>
离子标签/span>
>//span>
{{物品 }}
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子列/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
离子含量/span>
>//span>
这里,
项目/code>
是一个数组,但可以是一个数组,
可观察的/code>
, 或者
数据源/code>
。
数据源/code>
是一个抽象类,可以提供所需的数据以及实用程序方法。有关更多详细信息,请查看
CDK虚拟滚动文档/a>
。/p>
该组件尚未完成,因为
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
需要知道每个节点以及最小/最大缓冲区大小的大小。/p>
目前,CDK Virtual Scroller仅支持固定尺寸的元素,但计划未来的动态大小元素。为了
tab1page/code>
组件,由于它仅渲染一个项目,因此可以将其硬编码为固定尺寸。/p>
最小/最大缓冲区的大小告诉滚动器“呈现出达到最低高度的节点,但不能超过此。”/p>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
分数/span>
=//span>
“/span>
56
“/span>
Minbufferpx/span>
=//span>
“/span>
900
“/span>
maxbufferpx/span>
=//span>
“/span>
1350
“/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
对于这种情况,
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
将使细胞以56px的高度渲染,直到达到900px的高度,但不再以1350px为单位。这些数字是任意的,因此请确保在实际用例中测试哪些值将起作用。//p>
将所有内容整合在一起,最终的HTML应该看起来像:/p>
<//span>
离子含量/span>
>//span>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
分数/span>
=//span>
“/span>
56
“/span>
Minbufferpx/span>
=//span>
“/span>
900
“/span>
maxbufferpx/span>
=//span>
“/span>
1350
“/span>
>//span>
<//span>
离子列/span>
>//span>
<//span>
离子项目/span>
*cdkvirtualfor/span>
=//span>
“/span>
让项目
“/span>
>//span>
<//span>
离子 - 阿瓦塔尔/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://loremflickr.com/40/40
“/span>
/>/span>
//span>
离子 - 阿瓦塔尔/span>
>//span>
<//span>
离子标签/span>
>//span>
{{物品 }}
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子列/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
离子含量/span>
>//span>
最后需要的是一些CSS来正确尺寸。在里面
tab1.page.scss/code>
文件,添加以下内容/p>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
{//span>
高度/span>
:/span>
100%
;/span>
宽度/span>
:/span>
100%
;/span>
}//span>
由于构建的视口是为了适合各种用例,因此默认尺寸尚未设置,并且由开发人员设置。/p>
关于离子成分的注释betway东盟体育app/a>
某些离子框架功能betway东盟体育app当前与虚拟滚动不兼容。诸如可折叠大标题之类的功能,
离子侵入式滚动/code>
, 和
离子消失/code>
依靠能够滚动
离子含量/code>
本身,因此,使用虚拟滚动时将无效。/p>
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。您可以遵循进度并在此处提供反馈:
https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437/a>
。/p>
进一步阅读/a>
这仅涵盖CDK虚拟滚动器能够的一小部分。有关更多详细信息,请参阅
Angular CDK虚拟滚动文档/a>
。/p>
以前的/div>
导航/路由/span>
下一个/div>
幻灯片/span>
过去,我们提供了一个
要设置CDK滚动器,请先安装
这提供了不同公用事业的集合,但我们将重点关注
当我们要使用CDK滚动器时,我们需要在组件中导入模块。例如,在标签启动器项目中,我们可以将导入添加到
添加了此信息,我们可以访问TAB1PAGE组件中的虚拟滚动器。/p>
CDK虚拟滚动器可以通过添加来添加到组件中
此时,DOM节点可以是应用程序所需的任何内容。不同之处在于,当我们想迭代一个集合时,
这里,
该组件尚未完成,因为
目前,CDK Virtual Scroller仅支持固定尺寸的元素,但计划未来的动态大小元素。为了
最小/最大缓冲区的大小告诉滚动器“呈现出达到最低高度的节点,但不能超过此。”/p>
对于这种情况,
将所有内容整合在一起,最终的HTML应该看起来像:/p>
最后需要的是一些CSS来正确尺寸。在里面
由于构建的视口是为了适合各种用例,因此默认尺寸尚未设置,并且由开发人员设置。/p>
某些离子框架功能betway东盟体育app当前与虚拟滚动不兼容。诸如可折叠大标题之类的功能,
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。您可以遵循进度并在此处提供反馈:
https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437/a>
。/p>
这仅涵盖CDK虚拟滚动器能够的一小部分。有关更多详细信息,请参阅
Angular CDK虚拟滚动文档/a>
。/p>
离子虚拟卷/code>
离子框架中的组件可帮助列表betway东盟体育app虚拟化。当时这是不可用的,但最近Angular通过
@angular/cdk/code>
包裹。/p>
设置/a>
@angular/cdk/code>
:/p>
NPM/span>
添加/span>
@angular/cdk/code>
滚动模块/code>
目前。/p>
tabs1.module.ts/code>
文件。/p>
从'@ionic/betway东盟体育appangular'导入{ionicModule};从'@angular/core'导入{ngmodule};从'@angular/common'导入{commonModule};从'@angular/forms'导入{formsModule};从'./tab1.page'导入{tab1page};从'../ explore-container/explore-container.module';+来自'@angular/cdk/scrolling'的导入{scrollingModule};从'./tab1-routing.module';导入{tab1pageroutingmodule};@ngmodule({imports:[ionbetway东盟体育appicModule,commonModule,formsModule,explorecontainerComponentModule,tab1pageroutingmodule, + scrollingModule],声明:[tab1page]})//code>
用法/a>
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
到组件的模板。/p>
<//span>
离子含量/span>
>//span>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
离子含量/span>
>//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
成为我们可滚动内容的根源,并负责回收DOM节点,因为它们滚出了视线。/p>
*cdkvirtualfor/code>
使用而不是
*ngfor/code>
。/p>
<//span>
离子含量/span>
>//span>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
<//span>
离子列/span>
>//span>
<//span>
离子项目/span>
*cdkvirtualfor/span>
=//span>
“/span>
让项目
“/span>
>//span>
<//span>
离子 - 阿瓦塔尔/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://loremflickr.com/40/40
“/span>
/>/span>
//span>
离子 - 阿瓦塔尔/span>
>//span>
<//span>
离子标签/span>
>//span>
{{物品 }}
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子列/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
离子含量/span>
>//span>
项目/code>
是一个数组,但可以是一个数组,
可观察的
数据源/code>
。
数据源/code>
是一个抽象类,可以提供所需的数据以及实用程序方法。有关更多详细信息,请查看
CDK虚拟滚动文档/a>
。/p>
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
需要知道每个节点以及最小/最大缓冲区大小的大小。/p>
tab1page/code>
组件,由于它仅渲染一个项目,因此可以将其硬编码为固定尺寸。/p>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
分数/span>
=//span>
“/span>
56
“/span>
Minbufferpx/span>
=//span>
“/span>
900
“/span>
maxbufferpx/span>
=//span>
“/span>
1350
“/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/code>
将使细胞以56px的高度渲染,直到达到900px的高度,但不再以1350px为单位。这些数字是任意的,因此请确保在实际用例中测试哪些值将起作用。//p>
<//span>
离子含量/span>
>//span>
<//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
分数/span>
=//span>
“/span>
56
“/span>
Minbufferpx/span>
=//span>
“/span>
900
“/span>
maxbufferpx/span>
=//span>
“/span>
1350
“/span>
>//span>
<//span>
离子列/span>
>//span>
<//span>
离子项目/span>
*cdkvirtualfor/span>
=//span>
“/span>
让项目
“/span>
>//span>
<//span>
离子 - 阿瓦塔尔/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://loremflickr.com/40/40
“/span>
/>/span>
//span>
离子 - 阿瓦塔尔/span>
>//span>
<//span>
离子标签/span>
>//span>
{{物品 }}
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子列/span>
>//span>
//span>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
>//span>
//span>
离子含量/span>
>//span>
tab1.page.scss/code>
文件,添加以下内容/p>
CDK-VIRTUAL-SCROLL-VIEWPORT/span>
{//span>
高度/span>
:/span>
100%
;/span>
宽度/span>
:/span>
100%
;/span>
}//span>
关于离子成分的注释betway东盟体育app/a>
离子侵入式滚动/code>
, 和
离子消失/code>
依靠能够滚动
离子含量/code>
本身,因此,使用虚拟滚动时将无效。/p>
进一步阅读/a>