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，ticket内。您的虚拟滚动需要在组件生命周期的开始时呈现。因此，如果您将虚拟滚动包装在一个条件中，该条件从构造函数的时间开始等于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，而是将其设置为[]，如果您希望它为空。