离子虚拟滚动的Ionic 4色谱柱不起作用

Question

我有当前代码：

<ion-grid>
    <ion-row>
      <ion-virtual-scroll [items]="places" approxItemHeight="200px">
        <ion-col size="12" size-lg="6" *virtualItem="let place">
          <ion-card (click)='viewDetails(place.id)' no-padding no-margin>

我希望它在屏幕尺寸大时在两列中显示我的卡。但是它仅使用一列宽度为6（屏幕的50％），如下所示。如果我删除<ion-virtual-scroll>元素并在该列上执行<ng-repeat>，则效果很好，并创建了两列。 Beta 19在这里。

（值得注意的是Ionic会自动添加自动换行，我试图弄清楚为什么要将每个元素都放在新行上）

Answer 1

它不适用于Virtual Scroll。制作了Virtual Scroll只能渲染屏幕上可见的项目，因此，虚拟项目应具有大致相同的高度，如果您这样做，则计算屏幕高度的算法将不适用于两种平台。

为此，您应该创建自己的VirtualScroll组件，并根据屏幕的宽度执行不同的操作。

Answer 2

ion-virtual-scroll 支持动态多列的技巧。 您可以使用带有管道的场所索引从源获取数据 ion-virtual-scroll support multi column