搜索文档 /

虚拟滚动

你可以为你的Ionic Vue应用考虑一个虚拟滚动解决方案betway东盟体育app vue-virtual-scroller .本指南将介绍如何安装 vue-virtual-scroller 加入您的离子Vue应betway东盟体育app用程序,并与其他离子组件一起使用。

安装

要设置虚拟滚轮,首先安装 vue-virtual-scroller


              npm
             
              安装
             vue-virtual-scroller@next

:::注:请务必使用 下一个 标签,否则将得到 vue-virtual-scroll 仅与Vue 2兼容。从这里,我们需要导入虚拟滚轮的CSS到我们的应用程序 main.ts ,添加以下行:


              进口
             
              “vue-virtual-scroller / dist / vue-virtual-scroller.css”
              
复制 复制

注册虚拟滚动组件

现在我们已经安装了这个包并导入了CSS,我们可以导入所有的虚拟滚动组件或者只导入我们想要使用的组件。本指南将展示如何做到这两点。

安装所有组件

要安装所有虚拟滚动组件使用你的应用程序,添加以下导入 main.ts


              进口
             VueVirtualScroller
              
             
              “vue-virtual-scroller”
              
复制 复制

接下来,我们需要在Vue应用程序中安装它:


             应用程序
              
              使用
              
             VueVirtualScroller
              
              
复制 复制

这样做之后,所有的虚拟滚动组件都可以在我们的应用程序中使用。

注意:安装所有组件可能会导致未使用的虚拟滚动组件被添加到你的应用程序包中。看到 安装特定的组件 小节介绍一种更适用于摇树的方法。:::

安装特定的组件

要在你的应用程序中安装特定的虚拟滚动组件,导入你想要使用的组件 main.ts .在本例中,我们将使用 RecycleScroller 组件:


              进口
             
              
             RecycleScroller
              
             
              
             
              “vue-virtual-scroller”
              
复制 复制

接下来,我们需要将组件添加到Vue应用程序中:


             应用程序
              
              组件
              
              “RecycleScroller”
              
             RecycleScroller
              
              
复制 复制

这样做之后,我们就可以使用 RecycleScroller 组件。

使用

这个例子将使用 RecycleScroller 组件,该组件仅呈现列表中的可见项。其他组件,如 DynamicScroller 可以在事先不知道物品大小的情况下使用。

RecycleScroller 组件应该添加到您的 离子含量 组件:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               ion-list
               >
             
                <
               RecycleScroller
              
               
                
                
               照片卷轴
                
              
               :项目
                
                
               列表
                
              
               :项目大小
                
                
               56
                
              
               >
             
                <
               模板
              
               #默认
                
                
               {项}
                
               >
             
                <
               ion-item
               >
             
                <
               ion-avatar
              
               
                
                
               开始
                
               >
             
                <
               img
              
               src
                
                
               https://picsum.photos/seed/picsum/40/40
                
              
               />
             
                
               ion-avatar
               >
             
                <
               ion-label
               >
             {{项}}
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               模板
               >
             
                
               RecycleScroller
               >
             
                
               ion-list
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               裁判
                
               
                
               
                “vue”
                
               
                进口
               
                
               IonAvatar
                
               IonContent
                
               IonItem
                
               IonLabel
                
               IonPage
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               IonAvatar
                
               IonContent
                
               IonItem
                
               IonLabel
                
               IonPage
                
                
               
                设置
                
                
               
                
               
                常量
               列表
                
               
                裁判
                
                
                0
                
               
                1
                
               
                2
                
               
                3.
                
               
                4
                
               
                5
                
               
                6
                
               
                7
                
               
                8
                
               
                9
                
               
                10
                
                
                
               
                返回
               
                
               列表
                
               
                
               
                
                
                
               
                
               脚本
               >
复制 复制

有两件重要的事我们需要解释清楚 RecycleScroller 去工作。首先,我们需要为它提供一个数据数组,以便通过 项目 财产。在这个例子中,我们有一个数组叫做 列表 它提供了我们的数据。其次,我们需要提供每个节点的大小通过 项目大小 财产。如果事先不知道节点的大小,则应该使用 DynamicScroller 组件。

现在模板已经设置好了,我们需要添加一些CSS来正确地调整虚拟滚动视口的大小。在一个 风格 标签,添加以下内容:


              .scroller
             
              
             
              高度
              
             100%
              
             
              
复制 复制

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

离子框架的某些功betway东盟体育app能目前不兼容虚拟滚动。例如可折叠的大标题, ion-infinite-scroll , ion-refresher 依赖于能够滚动 离子含量 本身,因此不能工作时,使用虚拟滚动。

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

进一步的阅读

本指南只涵盖了其中的一小部分 vue-virtual-scroller 有能力。欲知更多详情,请参阅 vue-virtual-scroller文档

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