Hoping someone can help me out with this.
I have virtual scroll working for my longer lists.
I have segments working according to the docs with dummy data.
I can’t figure out how to use ngswitch to change segments while using virtualscroll lists. I just get a blank white screen.
Instead of using ngswitch I used an ngIf to display the right list depending on what value has been selected in the segment, this works for selecting a segment and showing a list but is not ideal.
It also has the really odd side effect when testing on the ios emulator or a physical device that when you scroll the list under one segment and then move to another segment that second list has also scrolled which if it’s a shorter list results in a blank page. This does not happen in the browser using ionic serve though.
Any help with a segments / virtual scroll list example would really help me out.
Thanks
Could you provide some sample code of what you have or what you’ve tried?
@mhartington - I setup a plnkr to show what I mean:
This is based straight off the demo code from the docs, you can see that the basic segment switching works using puppies and kittens segments.
I added 2 segments
1 has my data set rendered with a standard ngFor, switching to this segment works fine and displays the list.
1 has my data set rendered with virtualScroll, switching to this segment gives a blank page.
If I remove the ngSwitchWhen from the virtualScroll list it renders fine so I know that the list is working.
Maybe I am just putting the ngSwitchWhen in the wrong place or something as virtualScroll is laid out a little differently than a standard ngFor’d list.
Any help much appreciated.
Hi,
This is a problem link to the height of the parentElement I think. Indeed virtualScroll use the height of the parent element to generate the virtualItems and display only these useful to fullfill the screen.
Using *ngSwitchWhen create a template that bind the value of your segment as shows the alternative syntax
<ion-list [ngSwitch]="pet"> <template [ngSwitchWhen]="puppies"></template> <template [ngSwitchWhen]="'virtualScroll'">Virtual scroll </template> <template [ngSwitchWhen]="'ngFor'">Ngfor</template> </ion-list>
The best solution I think is to apply a style height: 100% to your div
<div [ngSwitch]="pet" style="height:100%">
And it’s works !
1 Like
Cool I will try that out but perhaps this is something that should be included in ionic2 by default so if someone wants a virtualScroll list in a segment it works as expected?
Apologies for the necrophilia, but has there been any progress on this?
We have an app, built around ion-nav, in which the ‘home’ page contains an ion-tabs. One of the child tabs contains a virtualscroll list. In this context we had no problems with the virtualscroll rendering, but we fell afoul of an bug with the Android hardware back button: when navigating to another top-level page from a ‘tabbed’ page, pressing the back button would pop the stack but fail to re-render the view. We are currently trying to roll our own tabs without a navigation stack, but despite our best efforts, the virtualscroll refuses to render its list items. Every single one of its ancestors in the DOM has an explicit height set. No dice. Any help would be hugely appreciated!
There were some updates for virtualscroll in RC4, unfortunately it doesn’t seem to have moved ahead very much. I really hope the ionic guys can put some attention onyl virtualscroll prior to release because at the moment it is unusable.
Same here.
Just spent hours trying to figure out the strange behavior of the segment buttons on my app, while the ionic example works correctly.
Until I’ve found out that in my app the page with the segment buttons is referred to from a page with virtualScroll. Once I’ve changed the virtualScroll back to ion-list, the segment buttons on the next page were working correctly…
Hopefully we’re going to see a fix soon since the ion-list is really not an option for longer lists.
1 Like
Over 1 year since originally posted. Issue still open on github. No response.
Who do I have to bribe to get someone to pay some attention to virtualscroll?
1 Like
Hi ghenry22,
I came accross on the same issue with my current project now, how did you get it work with Segment and VirtualScroll? Please advise. Thanks
I didn’t. Virtualscroll never worked within any form of conditional. An issue was logged for this and was open for over a year with no resolution.
I am hoping that virtualscroll in ionic4 has received some attention as it was broken for several use cases for basically the entire life of ionic2/3.
I love ionic but these things can get frustrating when they drag out without response.