Gestures on top of list

1

Hi team,

While having ionic list along with the side menu, where by default swipe right to left shows the side menu, I need to somehow to be able to listen for the swipe and:

  • If the swipe is from the edge of the device then show side menu
  • if its not from the end and its e.g. 30 px. far away from edge I need to disable standard swipe action so side bar will not show up, but i will be able to invoke my own action.

Basically I have list with images per each list row and I need to be able using swipe left -> right, right -> left list thru those images on each list row.

Any input welcomed.

Frank

2

Have you tried using ionic’s edge-drag-threshold?

http://ionicframework.com/docs/api/directive/ionSideMenuContent/

<ion-side-menu-content
  edge-drag-threshold="true"
  drag-content="true">
</ion-side-menu-content>

While the default value is 25px, if you want to stick to your 30 pixels, change it to this:

<ion-side-menu-content
  edge-drag-threshold="30"
  drag-content="true">
</ion-side-menu-content>

EDIT: if you happen to want the same behaviour for the right side-menu, I created a pull request, which I expect will be merged later on or the issue will be addressed otherwise, but the right side threshold was not implemented correctly (by some minor problems though, the intent was fine) You can check the pull request here: https://github.com/driftyco/ionic/pull/2134

1 Like
3

I was giving these 30px as a examples but this definitely helps. Where for side menu I need to be 0px and once this one will work it will allow me to do some swiping in the list row.
So I can change individual pictures in single list row by swiping left / right and this part can checked if I am from edge e…g 30 px.
Basically I want to achieve something similar as you can see it in the AirBnb. changing pics in discovery page

For the rest I think I should be ok with $ionicGesture.

Thank you so much,
Frank

4

Well, I don’t really get what you are saying now :wink: If there is anything you still need please specify, and if not I was really glad to help :slight_smile: (Guess AirBnb is part of understanding, I don’t know that app :P)

5

I see you are not familier with this app ;-). this is what I meant exactly (see the pic).

List with pictures and support for swiping as it is shown on the pics .

You helped me with the Yellow Swipe that will be triggered from the edge and if I start swiping like RED swipe (to change pics) I can probably do this using $ionicGesture right ?
Or is there a simple way ?

Sorry for the confusion,
Frank

6

I had no clue what kind of app it is :wink: Your image makes things really clear though!

You should take a look at the SlideBox directive really, It seems to me this is exactly what you need!

http://ionicframework.com/docs/api/directive/ionSlideBox/

If you don’t feel comfortable about using the slide box (but I think you should =P), you can take a look at the ionic events docs: http://ionicframework.com/docs/api/directive/onSwipeLeft/ which triggers a method when you swipe to the left. Using this directive on top of the images should give a nice result. (But again, slidebox seems to be the way to go in my opinion)

7

Great. Thanks for providing such detail quick and details answer.
I can do my homework from here :wink:

8

You’re welcome! Just shout when you need more help :slight_smile: I’m tracking the topic, so I should usually see it within 24 hours (except for weekends maybe) :wink:

Good luck!

1 Like