Ionic 5 Virtual scroll leaves gaps where new items should be added

Question

Ionic 5 Virtual scroll leaves gaps where new items should be added

https://i.sstatic.net/y0lX7.png

My goal is to display a list using ion-virtual-scroll, but I'm facing an issue where the new items are not showing up dynamically. Instead, they create blank spaces in the list. However, when I inspect the scroll, I can see that the new item is present with this CSS property: " transform: translate3d(0px, -9999px, 0px); "

   <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
    <ion-virtual-scroll [items]="listedLoadedPlaces"

    >
      <ion-item

        [routerLink]="place.id"
        detail
        *virtualItem="let place"
      >
        <ion-thumbnail slot="start">
          <ion-img [src]="place.imageUrl"></ion-img>
        </ion-thumbnail>
        <ion-label>
          <h2>{{place.title}}</h2>
          <p>{{place.description}}</p>
        </ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ion-col>

typescript ionic-framework ionic4 angular8

Answer 1

Answer №1

For those facing a similar problem, consider using the checkRange and checkEnd APIs provided by the IonVirtualScroll. These functions mark either the last item or a specified item as dirty to trigger a fresh render of that particular item.

In an Ionic Angular project, the code will look something like this:

template: <ion-virtual-scroll #listedLoadedPlacesScroll [items]="listedLoadedPlaces">
           <ion-item........

component:
  @ViewChild('#listedLoadedPlacesScroll', null) listedLoadedPlacesScroll: IonVirtualScroll;

.....
functionToUpdateList(): void {
   this.listedLoadedPlaces.push(newItem);
   this.listedLoadedPlacesScroll.checkEnd();
}

If you need to update a specific item that is not the last one in the source data array, use the checkRange function:

template: <ion-item
        [routerLink]="place.id"
        detail
        *virtualItem="let place; let index = index;"
        (click)="doSomething(place, index)"
      >

component:
    doSomething(place, index): void {
      ..do something to place...
      this.listedLoadedPlacesScroll.checkRange(index, 1);
}

With checkRange, you can specify the index of the item to mark as dirty. The second parameter, len, determines how many items starting from the current index should be marked as dirty. For example, setting len = 3 marks the items at index, index + 1, and index + 2 as dirty for a fresh render.

In one scenario, I needed to update an item out of view when changing an item in view. To solve this, I marked all items as dirty using checkRange(0, items.length). It may not be elegant, but it gets the job done effectively now.

Answer 2

For those facing a similar problem, consider using the checkRange and checkEnd APIs provided by the IonVirtualScroll. These functions mark either the last item or a specified item as dirty to trigger a fresh render of that particular item.

In an Ionic Angular project, the code will look something like this:

template: <ion-virtual-scroll #listedLoadedPlacesScroll [items]="listedLoadedPlaces">
           <ion-item........

component:
  @ViewChild('#listedLoadedPlacesScroll', null) listedLoadedPlacesScroll: IonVirtualScroll;

.....
functionToUpdateList(): void {
   this.listedLoadedPlaces.push(newItem);
   this.listedLoadedPlacesScroll.checkEnd();
}

If you need to update a specific item that is not the last one in the source data array, use the checkRange function:

template: <ion-item
        [routerLink]="place.id"
        detail
        *virtualItem="let place; let index = index;"
        (click)="doSomething(place, index)"
      >

component:
    doSomething(place, index): void {
      ..do something to place...
      this.listedLoadedPlacesScroll.checkRange(index, 1);
}

With checkRange, you can specify the index of the item to mark as dirty. The second parameter, len, determines how many items starting from the current index should be marked as dirty. For example, setting len = 3 marks the items at index, index + 1, and index + 2 as dirty for a fresh render.

In one scenario, I needed to update an item out of view when changing an item in view. To solve this, I marked all items as dirty using checkRange(0, items.length). It may not be elegant, but it gets the job done effectively now.

Ionic 5 Virtual scroll leaves gaps where new items should be added

Answer №1

Similar questions

Controlling numerous websockets using React

Restoring scroll position in Next.js when the page is reloaded

Troubleshooting problems with permissions when using the AWS IAM assumeRole function with session

Declaration of function with extra attributes

What are some practical ways to employ optional chaining when working with arrays and functions?

Retrieve the response status using a promise

I'm looking for recommendations for an Ionic application template, can

choose this.variable angular 12 in a dynamic manner

What could be causing the Ioncol not triggering the Onclick event?

Achieving VS Code/typescript autocomplete functionality without the need to import the library

The Vue API client fetches necessary information from the server and generates a .csv file with accurate headers and IDs. However, the data retrieved is incomplete

Can inheritance pass constructor values in TypeScript/JavaScript?

Compiler raises concerns about potential undefined values in nested objects

How to Validate Comma-Separated Email IDs Using Regex in Angular 5 Template?

increase the selected date in an Angular datepicker by 10 days

App is only being installed on devices running Nougat when using Ionic/Cordova

Why am I encountering numerous errors while attempting to install Juice Shop?

Mastering Redux Toolkit - Ensuring Payload Type Verification is in Place when Invoking an Action Creator

Is it possible for the binding model of Mat-Checkbox to be optional or null?

I'm encountering an error after updating Angular/Typescript. The error message states that Type 'Observable<unknown>' cannot be assigned to type 'Observable<ProcResult[]>'