搜索文档 /

虚拟滚动

你可以为你的Ionic React应用考虑一个虚拟滚动解决方案betway东盟体育app 艺术大师 .本指南将介绍如何安装 艺术大师 加入到你的离子反应应betway东盟体育app用中,并将其与其他离子组分一起使用。

安装

要安装虚拟卷轴,请先安装 react-virtuoso


              npm
             
              安装
             react-virtuoso

使用

Virtuoso包含一些组件,但本例将使用 艺术大师 组件。这个组件应该添加到您的 IonContent 组件:


              进口
             反应
              
             
              “反应”
              
             
              进口
             
              
             艺术大师
              
             
              
             
              “react-virtuoso”
              
             
              进口
             
              
             IonAvatar
              ,
             IonContent
              ,
             IonItem
              ,
             IonLabel
              ,
             IonPage
              ,
             
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              常量
             首页
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              =>
             
              
             
                <
                IonPage
               >
                <
                IonContent
               >
              <艺术风格=
              
              
             高度
              
             
              “100%”
             
              
              
              totalCount =
              
              One hundred.
              
              itemContent =
              
              指数
             
              =>
             
              
             
              返回
             
              
             
                <
               div
              
               风格
                
                
                
               高度
                
               
                “56 px”
               
                
                
               >
                <
                IonItem
               >
                <
                IonAvatar
              
               
                
                
               开始
                
               >
                <
               img
              
               src
                
                
               https://picsum.photos/seed/picsum/40/40
                
              
               />
                
                IonAvatar
               >
                <
                IonLabel
               >
              
             指数
              
                
                IonLabel
               >
                
                IonItem
               >
                
               div
               >
             
              
              
             
              
              
              />
                
                IonContent
               >
                
                IonPage
               >
             
              
              
             
              出口
             
              默认的
             首页
              
复制 复制

后添加 艺术大师 组件时,我们需要定义虚拟滚动容器的大小。在本例中,我们希望容器占据整个屏幕的高度,我们可以通过添加来做到这一点 Style ={{height: '100%'}}

接下来,我们想要定义通过渲染的项目总数 totalCount 财产。

从那里,我们可以使用 itemContent 属性传递一个函数,该函数将被调用以呈现虚拟滚动内容中的每个项。

这里需要注意的一个重要的事情是 div 包装我们的 IonItem 组件。当惰性加载离子组件时,可能会有一些帧betway东盟体育app组件被加载但样式没有加载进去。当这种情况发生时,组件的维度将为 0 , Virtuoso可能会抛出一个错误。这是因为Virtuoso需要为它呈现的每个项目提供不同的位置,并且它不能确定组件的维度是什么时候 0

关于离子成分的说明betway东盟体育app

Ionic Frbetway东盟体育appamework的某些功能目前与虚拟滚动不兼容。诸如可折叠的大标题、 ion-infinite-scroll , ion-refresher 依赖于能够继续滚动 离子含量 本身,因此在使用虚拟滚动时将无法工作。

我们正在努力提高这些组件和虚拟滚动解决方案之间的兼容性。你可以在这里跟踪进度并给出反馈: https://github.com/betway东盟体育appionic-team/ionic-framework/issues/23437

进一步的阅读

本指南只涵盖了其中的一小部分 艺术大师 有能力。欲知更多详情,请参阅 艺术大师的文档

以前的
导航/路由
下一个
幻灯片
Baidu