Ion-slides looping trick - doesnt update?

Ionic Framework ionic-v3
1

I am trying to pull off a “trick” in ionic2 as follows: - I have one slide set to loop. - When the slide is swiped I increase or decrease a variable - that variable will cause different data to display in the slide.

This way I can get the full UI experience of the slides component without hardcoding or pre-loading all the other slides. For eg lets say you are viewing data by day, I want to be able to slide back and forth to look at data from previous days. Given the change I will just reload the relevant days data.

It ALMOST works except that the slider doesnt seem to refresh properly when looping. Take a look this http://plnkr.co/edit/VlxrNO7I6sqLGHsLdB9R?p=preview

<ion-slides loop="true" (ionSlidePrevEnd)="slideChanged(-1)" (ionSlideNextEnd)="slideChanged(1)">
   <ion-slide>Slide{{newval}}
   Test 
   </ion-slide>
 </ion-slides>
</ion-content>

Controller

export class HomePage {

  appName = 'Ionic App';
  newval: number = 0;
  constructor(public navController: NavController) { }

   slideChanged(step: number) {
        this.newval = this.newval + step;
   }
}

If you swipe back and forth the text doesnt change. It should increase or decrease eg Slide 1, Slide 2 etc… BUT do a few swipes and then instead of swiping just click down on the slide and move it a little and THEN the label does refresh to give you the correct value! Its almost like because I am looping - all thats displayed is the original slide value and not the updated value, until I click somewhere on the slide causing it to refresh.

So bottom line I assume this is a bug? Is there any way I can trigger this “refresh” behaviour programmatically?

Thanks

1 Like
2

You may try to loop 3 slides and on each slide change update the current, prev and next slide with the appropriate content. This may may take care of the update. Not tested but may work.

3

Interesting idea…I assume you mean that the next and prev will always be pre-loaded and not loaded on the fly. It may work but I have a feeling that when i slide twice eg Next and then Next again it will have the same issue because its being loaded based on an event so would be no difference to this.

I may still give it a try but part of my reason for this approach is because my view is heavy with a long list and visualizations. I dont want to have more than one of these views loaded at a time.

There must be something in the underlying slider that would allow me to trigger a refresh of some kind?

4

Their is a calendar for ionic 2 that uses slider to loop months.that may give you some hints.

5

Gotters, did you get this to work. I am trying to build a calendar that does this same thing. I have tried with 2 and 3 slides. It seems that when I go previous, my 0 index data does not update and when I go next, my 1 index data does not update. When I ‘jiggle’ the slide the data will refresh and shows up.

Were you able to get this working?

6

No I could not get it to work.
If you look at the calendar app that vazad referred too you might be able to figure it out. If you do let me know.

For now I am pre-loading a few slides and keeping them all hidden and only displaying when visible.

7

There is at least one open case on this matter.
See https://github.com/driftyco/ionic/issues/10784