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

Question

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

我有一个单词列表，我想在页面中显示它们。早些时候我使用 for 循环迭代了这些词，但在 android 设备中滚动性能很糟糕。所以我决定实现 ionic 官方文档中提到的基本虚拟滚动。

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。这是帮助虚拟列表进行计算的重要步骤。

不要包含在 If 语句中

很遗憾，您不能将虚拟卷轴放在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 应该允许元素出现在屏幕上并占用正确的空间量，而实际上并不存在。此代码可能需要根据您的实现进行调整。

确保项目存在

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