Ionic 3 虚拟滚动仅显示一小部分项目

Question

我在使用 Ionic 3.3.0 虚拟滚动时遇到问题，因为我有一个 ~360 个项目数组，它只在手机上显示前 15 个。有人遇到过这个问题吗？

PS：虚拟滚动列表位于具有屏幕高度 35% 的容器中。不知道这是否对问题有影响...

this.friendsList = [{name: 'John'},...,{name: 'Zed'}];
<div class="friends-list__container">
  <ion-list [virtualScroll]="friendsList">
    <ion-item *virtualItem="let friend">
      {{friend.name}}
    </ion-item>
  </ion-list>
</div>

Answer 1

在研究了这个问题之后，解决方案似乎是在虚拟滚动列表周围添加一个额外的 DIV 包装器：

<div class="friends-list__container">
  <div> <!-- This is needed for the virtual scroll to work properly -->
    <ion-list [virtualScroll]="friendsList">
      <ion-item *virtualItem="let friend">
        {{friend.name}}
      </ion-item>
    </ion-list>
  </div>
</div>