SlideBox style nav using NavRouter?


#1

I’m building an overview-list page which links to a detail page which you can swipe left/right to navigate between detail pages.

Currently this is implemented as a with for the overview and also for the detail pages. To swipe, I created an angular directive embedded in the detail page which captures Gesture.on(‘swipe’, …) and sets window.location appropriately.

(As a side note, even if I inject $location, I’m unable to use $location.path = “/detail/0” for example, which is what Angular suggests.)

While this works for swiping to the right, it’s not clear how to reverse the animation. The navRouter directive exposes $scope.navController, but it’s not clear how to change how animations work. Animations seem implemented within ionicNavRouter.js/directive(‘navRouter’)/link but there doesn’t seem to be a way to easily just add “reverse” to the class for example and get the animation defined in _animations.scss (specifically .slide-left-right .reverse).

Any thoughts? I had originally considered starting with the SlideBox controller but figured I’d try the navRouter for generality and figure out how to slide after the fact.


#2

Hey @lwu. I think I see what you are trying to do.

Adding this type of swiping (similar to how the nav system works in iOS 7) was on our list, but I think you are talking about something slightly different?

If you are looking for more of an infinite swipe box, you’d want to use a different method (namely a scrollable area). I still need to get support for that up into the <content> area. It’s on the list.

Do you have any examples I could look at to get a better idea of what you are trying to do?

Thanks!


#3

Here’s the use case: Ionic ASP app screnshot

On the left, you see an overview of an exercise program. [Ideally the header scrolls out of view and “start” is visible only until you start scrolling.]

When you click to drill down, you see a detail page for an exercise. Rather than navigating back using the header, you’d want to swipe left & right to see the next exercise. Sort of like what SlideBox does already.

Right now it just uses pane nav-router with animation slide-left-right-ios7 and when it captures the “swipe” it just manually redirects via window.location to the next exercise. This works if you slide one way, but the animation doesn’t go the other way if you swipe backwards.