搜索文档 /

ion-virtual-scroll

Virtual Scroll显示一个虚拟的“无限”列表。将记录数组传递给虚拟卷轴,其中包含要创建模板的数据。为每个记录创建的模板(称为单元格)可以由项、页眉和页脚组成。出于性能原因,列表中的每条记录不是一次呈现;相反,呈现一小部分记录(足以填满视口),并在用户滚动时重用。

本指南将介绍每个框架集成的推荐虚拟滚动包,以及不推荐使用的虚拟滚动包的文档 ion-virtual-scroll 离子角组件。betway东盟体育app我们建议使用下面列出的特定于框架的解决方案,但是 ion-virtual-scroll 下面为仍然在使用该组件的开发人员提供了文档。

有棱角的

关于ionanangular中的虚拟滚动选项,请参见betway东盟体育app 角形虚拟滚动指南

反应

有关Ionic React中的虚拟滚动选项,请参阅betway东盟体育app React虚拟滚动指南

Vue

关于ionovue中的虚拟滚动选项,请参见betway东盟体育app Vue虚拟卷轴指南


以下文档适用于 ion-virtual-scroll 组件。

大致的宽度和高度

如果虚拟滚动条中项目的高度不接近默认大小 40px ,为 近似高度 所有物不需要精确的像素完美大小,但如果没有估计,虚拟滚动将无法正确渲染。

每个模板的近似宽度和高度用于帮助确定应该创建多少单元格,并帮助计算可滚动区域的高度。注意,每个单元格的实际渲染大小来自应用程序的CSS,而这种近似仅用于帮助计算初始尺寸。

同样重要的是要知道,Ionic的默认道具大小在不同平台之间略有不同betway东盟体育app,这是完全正常的。

虚拟卷轴中的图像

HTTP请求、图像解码和图像渲染在滚动时可能导致垃圾。为了更好地控制图像,离子提供betway东盟体育app 来管理HTTP请求和图像呈现。当快速浏览项目时, 知道什么时候和什么时候不发出请求,什么时候和什么时候不渲染图像,只加载滚动后可视的图像。 阅读更多关于 ion-img

对于应用开发者来说,确保图像大小是固定的也是很重要的,在图像完全加载后,它们不会改变大小,也不会影响其他元素的大小。简单地说,为了确保渲染错误不会被引入,虚拟物品中的元素不能动态变化是至关重要的。

对于虚拟滚动,自然的效果 < img > 不是我们想要的功能。我们建议使用 本机上的组件 < img > 元素,因为 < img > 元素添加到DOM时,它立即发出对图像文件的HTTP请求。此外, < img > 可以在用户滚动时随时渲染。然而 是由包含 离子含量 并且在快速滚动时不会渲染图像。

虚拟滚动性能提示

iOS科尔多瓦WKWebView

当使用Cordova部署到iOS时,强烈推荐使用 WKWebView插件 为了充分利用iOS性能更高的webview。此外,与较早的UIWebView相比,WKWebView在高效滚动方面更具优势。

锁定元素的尺寸和位置

为了让虚拟卷轴有效地调整和定位每个道具,每个虚拟道具中的每个元素都不能动态改变其尺寸或位置,这一点非常重要。确保大小和位置不变的最好方法是,建议每个虚拟物品通过CSS锁定其大小。

使用 ion-img 对图像

在虚拟滚动中包含图像时,请确保使用 ion-img 而不是标准 < img > HTML元素。与 ion-img ,图像是惰性加载的,因此只呈现可视的,并且在滚动时有效地控制HTTP请求。

设置近似宽度和高度

如上所述,所有元素都应该锁定它们的尺寸。然而,虚拟卷轴直到渲染后才知道尺寸。对于初始渲染,虚拟滚动仍然需要设置应该建造多少物品。使用“近似”属性输入,例如 近似高度 ,我们可以给虚拟卷轴一个大致的大小,因此允许虚拟卷轴决定应该创建多少项。

更改数据集应使用 trackBy

迭代器中元素的标识可能会更改,而数据不会更改。例如,如果迭代器从RPC生成到服务器,并且RPC重新运行,则可能发生这种情况。即使“数据”没有改变,第二个响应也会产生具有不同身份的对象,而Ionic会破坏整个DOM并重建它。这是一项昂贵的操作,应尽可能避免。betway东盟体育app

每个虚拟项必须保持非常高效,但真正降低其性能的一种方法是在节头和页脚函数中执行任何DOM操作。这些函数会针对数据集中的每条记录调用,因此请确保它们是性能良好的。

反应

React中不支持Virtual Scroll组件。

Vue

ion-virtual-scroll Vue不支持。我们计划在不久的将来集成现有的社区驱动的虚拟卷轴解决方案。跟随我们的 GitHub线程问题 查看最新更新。

使用


                  <
                 离子含量
                 >
               
                  <
                 ion-virtual-scroll
                
                 (项目)
                  
                  
                 项目
                  
                
                 近似高度
                  
                  
                 320像素
                  
                 >
               
                  <
                 ion-card
                
                 *虚拟项目
                  
                  
                 让项目;让itemBounds = bounds;
                  
                 >
               
                  <
                 div
                 >
               
                  <
                 ion-img
                
                 (src)
                  
                  
                 项目1.imgSrc
                  
                
                 (高度)
                  
                  
                 项目1.imgHeight
                  
                
                 (alt)
                  
                  
                 item.name
                  
                 >
                  
                 ion-img
                 >
               
                  
                 div
                 >
               
                  <
                 ion-card-header
                 >
               
                  <
                 ion-card-title
                 >
               {{item.name}}
                  
                 ion-card-title
                 >
               
                  
                 ion-card-header
                 >
               
                  <
                 ion-card-content
                 >
               {{项目。内容}}
                  
                 ion-card-content
                 >
               
                  
                 ion-card
                 >
               
                  
                 ion-virtual-scroll
                 >
               
                  
                 离子含量
                 >
复制 抄袭

                出口
               
                
               
                VirtualScrollPageComponent
               
                
               项目
                
               
                任何
                
                
               
                
               
                
                
                
               
                建造师
                
                
               
                
               
                
               
                
                允许
               
                
               
                0
                
               
                <
               
                1000
                
               
                ++
                
               
                
               
                
                
               项目
                
                
                
                
               的名字
                
               
                +
               
                “- - -”
               
                +
               图片
                
               旋转
                
                
               imgSrc
                
               
                getImgSrc
                
                
                
               avatarSrc
                
               
                getImgSrc
                
                
                
               imgHeight
                
               数学
                
                地板
                
               数学
                
                随机
                
                
               
                
               
                50
               
                +
               
                150
                
                
               内容
                
               洛勒姆
                
                子串
                
                0
                
               数学
                
                随机
                
                
               
                
               
                
               洛勒姆
                
               长度
                -
               
                100
                
               
                +
               
                100
                
               
                
                
                
               旋转
                ++
                
               
                如果
               
                
               旋转
                ===
               图片
                
               长度
                
               
                
               旋转
                
               
                0
                
               
                
               
                
               
                
               
                
               
                常量
               洛勒姆
                
               
                “Lorem ipsum door sit amet,奉献精英,seddo eiusmod temporal incident ut laboure and dolore magna aliqua。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外,还必须因疏忽而承担劳动责任。”
                
               
                常量
               图片
                
               
                
               
                “土匪”
                
               
                “蝙蝠车”
                
               
                “布鲁斯兄弟”
                
               
                “春天”
                
               
                “《”
                
               
                “埃莉诺”
                
               
                “李将军”
                
               
                “捉鬼敢死队”
                
               
                “霹雳游侠”
                
               
                “mirth-mobile”
               
                
                
               
                作用
               
                getImgSrc
                
                
               
                
               
                常量
               src
                
               
                'https://dummyimage.com/600x400/${Math.round(Math.random()*99999)}/fff.png'
                
               旋转
                ++
                
               
                如果
               
                
               旋转
                ===
               图片
                
               长度
                
               
                
               旋转
                
               
                0
                
               
                
               
                返回
               src
                
               
                
               
                允许
               旋转
                
               
                0
                
复制 抄袭

基本

记录数组应传递给 项目 财产的 ion-virtual-scroll 元素。将数据交给 项目 属性必须是一个数组。属性的项模板 *虚拟项目 属性是必需的 ion-virtual-scroll .的 *虚拟项目 属性可以添加到任何元素。


                  <
                 ion-virtual-scroll
                
                 (项目)
                  
                  
                 项目
                  
                 >
               
                  <
                 ion-item
                
                 *虚拟项目
                  
                  
                 让项目
                  
                 >
               {{项}}
                  
                 ion-item
                 >
               
                  
                 ion-virtual-scroll
                 >
复制 抄袭

页眉和页脚

节页眉和页脚是可选的。它们可以从开发人员定义的函数中动态创建。例如,一个大的联系人列表通常对字母表中的每个字母都有一个分隔符。开发人员提供自己的自定义函数,以便在每个记录上调用。自定义函数中的逻辑应确定是否创建节模板以及向模板提供哪些数据。自定义函数应该返回 无效的 如果不应该创建模板。


                  <
                 ion-virtual-scroll
                
                 (项目)
                  
                  
                 项目
                  
                
                 [校长]
                  
                  
                 myHeaderFn
                  
                 >
               
                  <
                 ion-item-divider
                
                 *虚拟领导者
                  
                  
                 让头
                  
                 >
               {{header}}
                  
                 ion-item-divider
                 >
               
                  <
                 ion-item
                
                 *虚拟项目
                  
                  
                 让项目
                  
                 >
               Item: {{Item}}
                  
                 ion-item
                 >
               
                  
                 ion-virtual-scroll
                 >
复制 抄袭

下面是对每条记录调用的自定义函数的示例。它传递单个记录、记录的索引号和整个记录数组。在本例中,每20条记录后,将插入一个标题。所以在第19和第20个记录之间,在第39和第40个记录之间,依此类推 <离子项目分割器> ,模板的数据将来自函数的返回数据。


                myHeaderFn
                
                记录
                 
                记录索引
                 
                记录
                
               
                
               
                如果
               
                
               记录索引
                
               
                20
               
                ===
               
                0
                
               
                
               
                返回
               
                “头”
               
                +
               记录索引
                
               
                
               
                返回
               
                无效的
                
               
                
复制 抄袭

自定义组件

如果要在Virtual Scroll中使用自定义组件,最好使用 < div > 以确保正确渲染组件。由于每个自定义组件的实现和内部结构可能会非常不同,因此在 < div > 是一种确保尺寸测量正确的安全方法。


                  <
                 ion-virtual-scroll
                
                 (项目)
                  
                  
                 项目
                  
                 >
               
                  <
                 div
                
                 *虚拟项目
                  
                  
                 让项目
                  
                 >
               
                  <
                 my-custom-item
                
                 (项)
                  
                  
                 
                  
                 >
               {{项}}
                  
                 my-custom-item
                 >
               
                  
                 div
                 >
               
                  
                 ion-virtual-scroll
                 >
复制 抄袭

属性

近英尺高度

描述

每个页脚模板单元格的大致宽度。此维度用于帮助确定初始化时应创建多少单元格,并帮助计算可滚动区域的高度。这个高度值只能使用二甲苯单位。注意,每个单元格的实际渲染大小来自应用程序的CSS,而这个近似用于帮助计算项目渲染前的初始尺寸。

属性 大约页脚高度
类型 数量
默认的 30

approxHeaderHeight

描述

每个页眉模板单元格的大致高度。此维度用于帮助确定初始化时应创建多少单元格,并帮助计算可滚动区域的高度。此高度值只能用于二甲苯单位。注意,每个单元格的实际渲染大小来自应用程序的CSS,而这个近似用于帮助计算项目渲染前的初始尺寸。

属性 大约收割台高度
类型 数量
默认的 30

近似高度

描述

如果虚拟物品的高度明显大于默认的每个虚拟物品模板单元格的近似高度,那么提供这个选项是很重要的。此维度用于帮助确定初始化时应创建多少单元格,并帮助计算可滚动区域的高度。这个高度值只能使用二甲苯单位。注意,每个单元格的实际渲染大小来自应用程序的CSS,而这个近似用于帮助计算项目渲染前的初始尺寸。

属性 approx-item-height
类型 数量
默认的 45

footerFn

描述

节页脚及其给定模板中使用的数据可以通过向传递函数来动态创建footerFn.footer函数中的逻辑可以决定是否应该使用页脚模板,以及给页脚模板提供哪些数据。函数必须返回无效的如果不应创建页脚单元格。

类型 ((item: any, index: number, items: any[]) => string | null | undefined) | undefined

footerHeight

描述

一个可选函数,将每个项的页脚映射到其高度内。

类型 ((item: any, index: number) => number

校长

描述

可以通过传递函数来动态创建Section头和在给定模板中使用的数据校长.例如,一个很大的联系人列表通常在字母表中的每个字母之间都有分隔符。应用程序可以提供自己的定制校长在数据集中的每条记录中调用。头函数中的逻辑可以决定是否使用头模板,以及给头模板提供哪些数据。函数必须返回无效的如果不应该创建标题单元格。

类型 ((item: any, index: number, items: any[]) => string | null | undefined) | undefined

头球

描述

一个可选函数,用于将每个项目标题映射到其高度内。

类型 ((item: any, index: number) => number

itemHeight

描述

一个可选函数,将每个项目映射到它们的高度内。当提供此函数时,可以采用以下方法进行大量优化和快速路径ion-virtual-scroll带来了巨大的性能改进。

这个函数允许跳过所有DOM读取,这样做可能会带来巨大的性能

类型 ((item: any, index: number) => number

项目

描述

在虚拟滚动中构建模板的数据。需要注意的是,当该数据发生更改时,整个虚拟滚动将被重置,这是一项昂贵的操作,应该尽可能避免。

类型 任何[]|未定义

nodeRender

描述

注意:只有香草JS API。

类型 ((el: HTMLElement | null, cell: cell, domIndex: number) =>

renderFooter

描述

注意:只有JSX API用于模板。

为要呈现的页脚提供呈现函数。返回JSX虚拟dom。

类型 ((item: any, index: number) => any

renderHeader

描述

注意:只有JSX API用于模板。

为要呈现的标题提供呈现函数。返回一个JSX虚拟dom。

类型 ((item: any, index: number) => any

renderItem

描述

注意:只有JSX API用于模板。

为要呈现的项提供呈现功能。返回一个JSX虚拟dom。

类型 ((item: any, index: number) => any

方法

checkEnd

描述

此方法将items数组的尾部标记为脏,以便可以重新渲染它们。

这相当于打电话:

virtualScrollcheckRangelastItemLen
复制 抄袭
签名 checkEnd() = > <承诺无效>

checkRange

描述

此方法将项目的一个子集标记为dirty,因此可以重新呈现它们。当内容或样式发生变化时,条目应该被标记为dirty。

要更新的项子集可以通过偏移量和长度来指定。

签名 checkRange(抵消:数量,len ?: number) => Promise . value (> . value

positionForItem

描述

返回虚拟项在给定索引处的位置。

签名 positionForItem(index: number) => Promise
Baidu