Ionic 2 - 虚拟滚动无法按预期工作

Question

我不知道为什么我实现的虚拟滚动看起来很奇怪.

我有一个单词列表,我想在页面中显示它们.之前我使用for循环迭代这些单词,但在Android设备中滚动性能很糟糕.所以我决定实现离子官方文档中提到的基本虚拟滚动.

http://rhymebrain.com/talk?function=getRhymes&word=baby

这是我试图迭代的数据.我只需要单词,没有其他信息.

我的虚拟滚动代码如下所示:

<ion-card *ngIf="words?.length > 0">
  <ion-card-header>rhymes with...</ion-card-header>
  <ion-card-content>
    <ion-list [virtualScroll]="words" [approxItemHeight]=" '500px' ">
      <button *virtualItem="let word" ion-button round small>
        {{word.word}}
      </button>
    </ion-list>
  </ion-card-content>
</ion-card>

在我的网络浏览器中,我得到的结果非常糟糕.我将分享一些屏幕:

图1:用户搜索单词以获取所有押韵,但即使响应不为空,也不会显示任何数据.

图2:如果我导航到另一页并回来,我会看到一些押韵.

图3:如果我重复步骤2或向下滚动一点,我会看到更多的单词.看起来很奇怪.

我不知道为什么虚拟滚动就像这样.谁能告诉我我犯了什么错误或更好的解决方案呢？

提前致谢

Answer 1

遗憾的是,虚拟滚动有一些问题没有记录.修复所有这些应该会让你朝着正确的方向前进.

预定高度

您的所有祖先[virtualScroll]必须具有预定义的高度.虚拟列表将获取元素高度,并在此基础上填充单元格.如果高度为0,它将仅填充几个单元格,这些单元格构成了快速滚动的缓冲区空间.不要使用内联CSS,但为简单起见,这是一个例子.

<ion-content>
  <div style="height:100%">
    <ion-list [virtualScroll]="items" approxItemHeight="50px">
      ...
    </ion-list>
  </div>
</ion-content>

定义近似项目高度

在上面的例子中,你可以看到我正在设置approxItemHeight.这是一个重要的步骤,可以帮助虚拟列表进行计算.

如果声明不要包装

不幸的是,你能不能把你的虚拟滚动内ngIf,票.您的虚拟滚动需要在组件生命周期的开始时呈现.因此,如果您将虚拟滚动包装在一个条件中,该条件从构造函数的时间开始等于true,则该问题将不存在.但是,如果稍后某些情况变为真,那么您将不得不重新设计您的实现.

我为此做的是从使用切换*ngIf到使用[ngClass]="virtualClass".当我想要隐藏我将设置的虚拟滚动virtualClass = 'virtual-hide'.

.virtual-hide { 
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

您无法使用,display: none因为这不会渲染虚拟滚动高度,我们想要解决同样的问题.上面的CSS应该允许元素在屏幕上并占用正确的空间量,而不是实际上在那里.可能需要根据您的实现调整此代码.

确保物品存在

切换到使用ngClass从ngIf将意味着你的虚拟滚动总是在DOM.因此,您必须确保始终设置items(数组[virtualScroll]).因此,请确保它永远不会undefined或者null,[]如果您希望它为空,请将其设置为.