Question

我正在尝试在ionic 4上进行虚拟滚动以显示两列列表，下面没有虚拟滚动的代码段使两列成为网格。但是通过虚拟滚动，它仅显示一个。我不知道自己在做什么错，我们将不胜感激。

Specification

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

<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>

Answer 1

要在虚拟滚动中支持两列视图，请使每个虚拟滚动项成为一对原始项目，并在单行中一个接一个地显示它们。例如，

node ./compatibility/detect.js

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

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

2 个答案: