Infinite slide/swipe of items


#1

Hi guys!

My message is quite big, briefely:

How do you correctly unshift an element into ion-slide-box and not to change current index?

Full description:

I am creating an application, that displays your workouts.

Each screen has a listing of workouts for current week.

  • By swiping left, you get a previous week.
  • By swiping right, you get next week.

A few commits earlier i had a view with several fields like this.

<div ng-repeat="workout in workouts" on-swipe-left="prevWeek()">
   <h1>{{workout.name}}
   etc...

prevWeek() changed the “workouts” array, loading workouts for previous week. So when it was changed, angular loaded it immediately to HTML.

But now I want to make it look smooth: when swiping left, i want to have an animation of swipe and upcoming new workouts.

I googled that and decided to make it with ion-slide-box. My plan was:

Load current week, previous and the next

  1. Display them with dynamic
  2. Swipe left/right.
  • If reached right end, load new week and push() it to workouts array (2. step would display it as proper)
  • If reached left end, load new week and unshift() it to workouts array.

The bug is at the very last step. By unshifting a new element, that should be displayed, ion-slide-box moves me to this very last week. So if a have array [‘c’,‘d’,‘e’] and default value is 1 (‘d’). Then, i move to 0 element (‘c’), a new element ‘b’ is unshifted at 0 index (now array is [‘b’,‘c’,‘d’,‘e’]), BUT ion-slide-box moves me automatically to index 0 (element ‘b’), not remaining at ‘c’.

Sorry for the long post. Shall add a brief descr at the begginnig.

Very simple Codepen upcoming

Thanks!


#2

Not solved yet, but probably will try not to add new elements, but to change already existing.

See http://codepen.io/zarko/pen/OPMdxY/


#3

Approved, solved my problem with the codepen above