Virtual Scroll - remove or hide item without reset (lost scroll position)

Ionic Framework ionic-v3
1

Hi,

I try to remove an item from virtual scroll without reset virtual scroll (retain the position in the scroll).

I tried:

  • splice => reset the virtual scroll, lost scroll position
  • hiding item => the next item does not go up in the list ( so there is a blank space )

Someone would have any idea?

2

you should provide some code so we can see where the problem is. Copy here some code of your .html and (.ts or .js) files. Without any code itā€™s pretty hard to help.

3

Yeah Sorry about that.

<ion-list [virtualScroll]="item" approxItemHeight="200px"
          approxHeaderHeight="0px" approxFooterHeight="0px">
    
    <ion-card  *virtualItem="let item;let idx = index" (click)="itemTapped($event, item)" 
              (swipe)="itemSwipeEvent(item,$event, idx)" 
              [ngClass]="{'swipe-left': item.id == swipeLeft_itemId}">
        
        <ion-img [src]="item.imageSrc" class="listImg"></ion-img>
        <div [innerHTML]="item.title"></div>
        <div [innerHTML]="(item.publishedDate | amTimeAgo) + ' on ' + item.sourceTitle"></div>
        
    </ion-card>
</ion-list>

Trying to remove an item from the list with the swipe event

this.items.splice(index, 1);
=> Virtual Scroll reset, scroll to top position. As indicated in Ionic 2 ā€œChanging the dataset requires the entire virtual scroll to be reset, which is an expensive operation and should be avoided if possibleā€

I suppose I have to find another way to remove the item from the list, so i try to hide the item in the list. I add the following line to my ion-card

[hidden]=ā€œitem.hideā€
=> item disappears from the list, the scroll position is retained. But the next elements does not go up in the list, there is blank space.

I seek another solution to remove or hide an item in a virtual scroll. Or there is something Iā€™m doing wrong?

4

one quick solution I could think of is that you could add a class to your ion-card eg ā€œhideIonCardā€ when you swipe to remove it.

CSS

The difference in css between visibility:hidden; and display:none; is that display:none doesnā€™t keep the actual space it took.

That would be the easiest way I think. But I know youā€™re not the only one facing this issue!

Let me know if it works!

2 Likes
5

Thanks a lot thatā€™s work. (How could I have not remember that. Difference between hidden and display: none)

I also use the ā€œfooterā€ in virtual scroll, to add an ā€œion-cardā€ when index=10.

<ion-list [virtualScroll]="arrayArticles" approxItemHeight="200px"
              approxHeaderHeight="0px" approxFooterHeight="0px"
              [footerFn]="showFooter">
        
        <ion-card  *virtualItem="let article;let idx = index" (click)="itemTapped($event, article)" 
                  (swipe)="articleSwipeEvent(article,$event, idx)" >
            <ion-img [src]="article.imageSrc" class="listImg" (load)="logDebug()" ></ion-img>
            <div [innerHTML]="article.title"></div>
            <div [innerHTML]="(article.publishedDate | amTimeAgo) + ' on ' + article.sourceTitle"></div>
            
        </ion-card>
       
        <ion-card [ngClass]="{'hideIonCard': Footer_Show == false}"  *virtualFooter="let footer"
            <img src="../../../img/smart.jpg" class="listImg">
            <ion-card-content>
                <p>My Ion-car when index=10</p>
            </ion-card-content>

            <ion-item class="bottom">
                <button light clear item-left (click)="RemoveCard_Footer()">
                    <div>Remove</div>
                </button>
            </ion-item>

        </ion-card>
</ion-list>

I try to do the same operation on the footer, ie remove it from the list When RemoveCard_Footer is called.

I added [ngClass]="{ā€˜hideIonCardā€™: Footer_Show == false}" on the footer. But this time, I do not have the same behavior
=> item disappears from the list, the scroll position is retained. But the next elements does not go up in the list, there is blank space.

If you have an idea on solving this problem

6

Maybe I should create a new post on this subject, itā€™s a little different

7

I have created a post for the problem on footer.
https://forum.ionicframework.com/t/virtual-scroll-remove-hide-footer-from-the-list/54054

8

In fact , I was ā€œrebindingā€ the view.

Without rebind with display:none:

  • item dissappers from the list, but the next elements does not go up in the list, there is blank space.
9

if someone have a clue, it will be welcome.

10

Please open an issue on Github about this exact issue. Youā€™re not the only one having the problem. No matter the changes you do to the original object, VirtualScroll will always recalulate itself and force to init position.

11

Thanks for your reply.

Indeed, there is an issue:

12

if someone has a workaround, it will be great

13

It seems not to be on the Ionic 2 roadmap for now.

If someone has a good idea as a workaround? can withdraw items from the list without losing the position in the scroll

Or an alternative to the ā€œvirtual scrollā€ with lazy loading images

14

Iā€™ve just rolled back all my virtual scrolls to standard ngFor with infinite scroll

15

Has there been any solution to this issue? I have the same problem with ionic3ā€¦

16

i don t think so, at least not now

try to look for a functional workaround.