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

确保项目存在

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