Question

我遇到了Ionic 3.3.0虚拟滚动的问题，因为我有一个~360项阵列，它只显示手机上的前15个。有没有人遇到过这个问题？

P.S。：虚拟滚动列表位于屏幕高度为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>

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

1 个答案: