Swipe for page transition

ionic-v1
1

Is it possibile to implement a swipe to turn page functionality in ionic? e.g. swipe left to go back. I mean in a way that the new page is “revealed” like when you drag for the sidebar.

2 Likes
2

This seems to be a feature that’s pretty popular. Saw this post yesterday with an example of it being implemented.

Not sure how hard this would be to work up though, I haven’t gone through that code to figure out how its done.

Edit:
Just went through the docs and found this file which seems to have some of the logic. Ethically, I wouldn’t go and take this and work it up for ionic, but if someone wants to reach out the the owner of the repo and see if he wouldn’t mind helping out…

Food for thought

2 Likes
4

That would be great, its just a small change. I’ve shown that app (sanitized) to a native iOS developer, asking how to enable that in XCode 5. He did not notice - -until i told him - that it was a hybrid app…

Those interactive transitions in iOS7 are a real killer, and this implementation is also - just good enough for Ionic :wink:

5

I didn’t spend long on this, so there are some bugs. You can use the $ionicGesture service to deal with this. It doesn’t have the nice iOS style of one view overlapping another, but is serviceable.

NOTE : Go to page 2, then drag to cause a back event. It sometimes crashes the page as it fires too much, but just a quick sample.

UPDATE : Changed from using $ionicGesture.on('drag'... to $ionicGesture.on('swipe' ... . Cleaned up all the accidental app crashes.

6

This is exactly the “webappy” lackluster imitation of the real thing (Content not following the gesture) that Framework7 managed to circumvent. This way, the feature is hardly discoverable and non-intuitive - as a user, i expect content to follow my movements.Anyway, i put in a Feature Request on Github.

7

@SidneyS I spent about 5 minutes on that. It was not intended as any formal implementation. I just wanted to point out that anyone that desired to do so could use $ionicGesture to begin working on their own non-lackluster implementation rather than expecting someone else to do their work for them.

I agree that Ionic would be greatly enhanced by having this feature and appreciate you opening an issue.

8

Well I know the guy who made Framework7 has worked on a bunch of touch sliders, similar to the ionic slide box. One in particular is a slider that can pass parameter to the url and act as a change in location. Seems similar to how Framework7 has wired things up.

9

Is there somehow possible to detect the swipe direction?

Funny thing i use your method but instead of usin the javascript history function i chose to send the user to a specific view:

.directive('dragBackchannel', function($ionicGesture, $state, $location) {
return {
restrict : 'A',
link : function(scope, elem, attr) {
  
  $ionicGesture.on('swipe', function(event) {
  
    console.log('Got swiped!');
    console.log(event);
    event.preventDefault();
    $location.path("/tab/bouquets");
    
  }, elem);
  
}
}  
})

your version worked but mine doesn’t. if i swipe it does nothing until i tap the screen once the it swipes back… any idea why?

10

Seconding wondering if there’s a way to detect the swipe direction?

I am converting a formerly native app (on WinPhone 8 no less) that basically has a rotating nav system: Users swipe left to go “forward” and right to go “back” and the whole thing loops at the end (ie. when you reach the “last” view in the list, and keep swiping, it returns to the first view.)

Any ideas of how this might be done in ionic?

11

@domenik: event.gesture.direction will return one of ‘left’, ‘right’, ‘up’ or ‘down’.

I had to poke through the source to find it. :smile:

2 Likes
12

Perfect thank you. Now i just need to find out why this doesnt work…

13

I ended up referencing $state and calling $state.transitionTo(‘stateName’);

Seems to work fine.

I ended up implementing my circular navigation like so:

I have a MenuService, which is storing a list of urls in the app, and a next/prev state for each one, So if I have Customers, ToDo List and Photos, I store something like:

var stateTransitions = [
{ url: '/customers', nextState: 'todo', prevState: 'photos' },
{url: '/todo', nextState: 'photos', prevstate: 'customers' },
{url: '/photos', nextState: 'customers', prevState: 'todo' }];

Then my menu controller gets passed the swipe direction and if it’s left or right, moves to next/prev according to the current url.

14

In the docs I see you can use ‘swiperight’ & ‘swipeleft’ - http://ionicframework.com/docs/api/utility/ionic.EventController/#onGesture

15

Here’s an update to this using Ionic Beta 9 and swiperight instead of drag.

UPDATED : http://codepen.io/calendee/pen/xkBKv

1 Like
16

Your link seems to be broken.

17

Fixed above. Thanks.