Virtual scroll with 2 columns

Ionic Framework ionic-v3
1

Hello, I’m designing a classified ad application and I am surprised about the lack of examples & tutorials about 2 column list approach.

Currently I have 2 columns with

<ion-col width-50 no-padding>

and 2 normal lists with each item like this:

<ng-container *ngFor="let ad of shown_ads; let even = even;">
    <ion-card class="adv-map" (click)="openAdDetail(ad)" *ngIf="even" tappable>

and the other one is with ‘odd’ of course.

Do you think this is the reason my app is killing old Android phones? What’s the best approach for this kind of 2 column list?

Of course if item sizes are different this code may grow in one column… That’s another issue I want to solve.

2

Is there any solution for virtual scroll with multiple columns?

3

To support two column view inside virtual scroll make each of the virtual scroll item to be a pair of our original items and show them one after another in the single row. For example,

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

A trick to make ion-virtual-scroll support Multiple Columns
https://info-golab.medium.com/ionic-virtual-scroll-with-dynamic-multi-columns-703c5dd0d0e7

1 Like