离子4: 2列网格列表虚拟滚动问题

Question

我正在尝试在ionic 4上做虚拟滚动来显示两列列表，下面的代码没有虚拟滚动使2列网格。但使用虚拟滚动时，它只显示一个。我不知道我做错了什么，任何帮助都将不胜感激。

<ion-row>
    <ion-virtual-scroll [items]="currentProducts">
       <ion-col size="6" size-sm="4" size-lg="3" no-padding *virtualItem="let product">
       <ion-card class="product" (click)="productSelected(product)">
         <ion-card-content>
           <div class="product">
               <ion-img [src]="product.thumbnails[0]" alt="brandLogo"></ion-img>
               <div class="product-text">
                   <h3 text-center>{{product.brand.name}}</h3>
                   <h5 text-center>{{product.name}}</h5>
                   <p text-center>{{product.itemNumber}}</p>
                   <h6 text-center>${{product.retailPrice}}</h6>
               </div>
           </div>
         </ion-card-content>
      </ion-card>
      </ion-col>
    </ion-virtual-scroll>
</ion-row>

这段代码没有虚拟滚动，它显示两列网格列表。

<ion-row>
    <ion-col size="6" size-sm="4" size-lg="3" no-padding *ngFor="let product of currentProducts">
       <ion-card class="product" (click)="productSelected(product)">
          <ion-card-content>
             <div class="product">
                <img src="{{product.thumbnails[0]}}" alt="brandLogo">
                <div class="product-text">
                    <h3 text-center>{{product.brand.name}}</h3>
                    <h5 text-center>{{product.name}}</h5>
                    <p text-center>{{product.itemNumber}}</p>
                    <h6 text-center>${{product.retailPrice}}</h6>
                </div>
             </div>
           </ion-card-content>
        </ion-card>
    </ion-col>
</ion-row>

Answer 1

为了在虚拟滚动中支持两列视图，使每个虚拟滚动项成为我们的一对原始项，并在单行中逐个显示它们。例如,

<ion-virtual-scroll [items]="pairs">
  <div class="row" *virtualItem="let pair">
    <div class="column">
     {{ pair[0] }}
    </div>
    <div class="column">
     {{ pair[1] }}
    </div>
  </div>
</ion-virtual-scroll>

Answer 2

在离子虚拟滚动中支持动态多列的技巧。你可以在这里看到如何做到这一点：

https://dev.to/timsar2/how-ionic-virtual-scroll-support-dynamic-multiple-columns-and-infinity-scroll-38jm

只需创建一个列表作为数据源的索引，然后使用管道将其传递给虚拟列表项。

然后使用ngfor在一行中创建列。

尝试在stackblitz https://stackblitz.com/edit/ionic-angular-v5-by5rkf?file=src%2Fapp%2Fapp.component.html中调整屏幕大小