虚拟滚动/h1>
为您的离子React应用程序考虑的一种虚拟滚动解决方案是betway东盟体育app
Virtuoso/a>
。本指南将介绍如何安装
Virtuoso/code>
进入您的离子Reacbetway东盟体育appt应用程序,并将其与其他离子组件一起使用。/p>
安装/a>
要设置虚拟滚动器,请先安装
React-Virtuoso/code>
:/p>
NPM/span>
安装/span>
React-Virtuoso/code>
用法/a>
Virtuoso包含了一些组件,但是此示例将使用
Virtuoso/code>
零件。该组件应在您的内部添加
离子体/code>
零件:/p>
进口/span>
反应
从/span>
“反应”/span>
;/span>
进口/span>
{//span>
Virtuoso
}//span>
从/span>
'react-virtuoso'/span>
;/span>
进口/span>
{//span>
Ionavatar
,,,,/span>
离子体
,,,,/span>
离子
,,,,/span>
离子标签
,,,,/span>
离子页
,,,,/span>
}//span>
从/span>
'@betway东盟体育appionic/react'/span>
;/span>
const/span>
家
:/span>
反应
。/span>
FC/span>
=//span>
((/span>
)/span>
=>/span>
((/span>
<//span>
离子页/span>
>//span>
<//span>
离子体/span>
>//span>
{//span>
{//span>
高度
:/span>
'100%'/span>
}//span>
}//span>
总计=/span>
{//span>
100/span>
}//span>
itemContent =/span>
{//span>
指数/span>
=>/span>
{//span>
返回/span>
((/span>
<//span>
div/span>
风格/span>
=//span>
{//span>
{//span>
高度
:/span>
'56px'/span>
}//span>
}//span>
>//span>
<//span>
离子/span>
>//span>
<//span>
Ionavatar/span>
投币口/span>
=//span>
“/span>
开始
“/span>
>//span>
<//span>
IMG/span>
src/span>
=//span>
“/span>
https://picsum.photos/seed/picsum/40/40
“/span>
/>/span>
//span>
Ionavatar/span>
>//span>
<//span>
离子标签/span>
>//span>
{//span>
指数
}//span>
//span>
离子标签/span>
>//span>
//span>
离子/span>
>//span>
//span>
div/span>
>//span>
)/span>
;/span>
}//span>
}//span>
/>/span>
//span>
离子体/span>
>//span>
//span>
离子页/span>
>//span>
)/span>
;/span>
出口/span>
默认/span>
家
;/span>
添加
Virtuoso/code>
组件到我们的页面,我们需要定义虚拟滚动容器的大小。在这种情况下,我们希望容器占用屏幕的全高,我们可以通过添加
样式= {{height:'100%'}}/code>
。/p>
接下来,我们要定义要通过
总数/code>
财产。/p>
从那里,我们可以使用
itemcontent/code>
属性传递一个函数,该函数将在我们的虚拟滚动内容中渲染每个项目。/p>
这里要注意的一个重要的事情是
div/code>
那包裹我们
离子/code>
零件。当懒惰加载离子组件时,可能会有几个帧betway东盟体育app加载组件,但未加载样式。发生这种情况时,组件的尺寸将为
0/code>
,并且Virtuoso可能会出错。这是因为Virtuoso需要为其渲染的每个项目都有不同的位置,并且无法确定何时组件的尺寸为
0/code>
。/p>
关于离子成分的注释betway东盟体育app/a>
某些离子框架功能betway东盟体育app当前与虚拟滚动不兼容。诸如可折叠大标题之类的功能,
离子侵入式滚动/code>
, 和
离子消失/code>
依靠能够滚动
离子含量/code>
本身,因此,使用虚拟滚动时将无效。/p>
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。您可以遵循进度并在此处提供反馈:
https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437/a>
。/p>
进一步阅读/a>
本指南仅涵盖了什么
Virtuoso/code>
有能力。有关更多详细信息,请参阅
Virtuoso文档/a>
。/p>
以前的/div>
导航/路由/span>
下一个/div>
幻灯片/span>
为您的离子React应用程序考虑的一种虚拟滚动解决方案是betway东盟体育app
Virtuoso/a>
。本指南将介绍如何安装
要设置虚拟滚动器,请先安装
Virtuoso包含了一些组件,但是此示例将使用
添加
接下来,我们要定义要通过
从那里,我们可以使用
这里要注意的一个重要的事情是
某些离子框架功能betway东盟体育app当前与虚拟滚动不兼容。诸如可折叠大标题之类的功能,
我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。您可以遵循进度并在此处提供反馈:
https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437/a>
。/p>
本指南仅涵盖了什么
Virtuoso/code>
进入您的离子Reacbetway东盟体育appt应用程序,并将其与其他离子组件一起使用。/p>
安装/a>
React-Virtuoso/code>
:/p>
NPM/span>
安装/span>
React-Virtuoso/code>
用法/a>
Virtuoso/code>
零件。该组件应在您的内部添加
离子体/code>
零件:/p>
进口/span>
反应
从/span>
“反应”/span>
;/span>
进口/span>
{//span>
Virtuoso
}//span>
从/span>
'react-virtuoso'/span>
;/span>
进口/span>
{//span>
Ionavatar
,,,,/span>
离子体
,,,,/span>
离子
,,,,/span>
离子标签
,,,,/span>
离子页
,,,,/span>
}//span>
从/span>
'@betway东盟体育appionic/react'/span>
;/span>
const/span>
家
:/span>
反应
。/span>
FC/span>
=//span>
((/span>
)/span>
=>/span>
((/span>
<//span>
离子页/span>
>//span>
<//span>
离子体/span>
>//span>
Virtuoso/code>
组件到我们的页面,我们需要定义虚拟滚动容器的大小。在这种情况下,我们希望容器占用屏幕的全高,我们可以通过添加
样式= {{height:'100%'}}/code>
。/p>
总数/code>
财产。/p>
itemcontent/code>
属性传递一个函数,该函数将在我们的虚拟滚动内容中渲染每个项目。/p>
div/code>
那包裹我们
离子/code>
零件。当懒惰加载离子组件时,可能会有几个帧betway东盟体育app加载组件,但未加载样式。发生这种情况时,组件的尺寸将为
0/code>
,并且Virtuoso可能会出错。这是因为Virtuoso需要为其渲染的每个项目都有不同的位置,并且无法确定何时组件的尺寸为
0/code>
。/p>
关于离子成分的注释betway东盟体育app/a>
离子侵入式滚动/code>
, 和
离子消失/code>
依靠能够滚动
离子含量/code>
本身,因此,使用虚拟滚动时将无效。/p>
进一步阅读/a>
Virtuoso/code>
有能力。有关更多详细信息,请参阅
Virtuoso文档/a>
。/p>