ons-gesture-detector

[OnsenUI]

Component to detect finger gestures within the wrapped element. See the guide for more details.

Click here to see the original article

[iceweasel]

Hi, I use ons-gesture-detector to swipe left and right page but I it seem like delay 300ms or somthing else I’m not sure. But when swipe, page change for a while.
ons-gesture-detector
…Area to swipe.
/ons-gesture-detector
I’ve to try on Android and Iphone.

[IliaSky]

Hi iceweasel,
I seem to be unable to reproduce the issue. There doesn’t seem to be a delay but rather the duration of the animation is probably not to your liking. The animation starts immediately, but its just that by default it takes 400ms to complete. That duration is configurable - you can set it to 150ms or 200ms so that it fits your expectations. You can try something like this:

navi.resetToPage("example.html", {animation: 'slide', animationOptions: {duration: '0.15'} });

[iceweasel]

@iliasky: Thanks for reply that options, but on swipe event. How can I modifier “speed” and/or “distance” or something like “swipe-left-end”. Because, when I swipe must to be on the entire width of device, and with speed quite fast…
Thanks.

[IliaSky]

Currently we aren’t expecting users to change the settings of the events. If you must do it you can change gestureDetector._gestureDetector.options.velocityX, which is the minimum velocity for which the event will be fired. However as you can notice by the underscore we do not recommend doing this.

Rather it may be better just to execute the code in your handler only if the velocity fits your requirements.

An event fired by gesture detector has the following attributes in e.gesture, which you may find useful - [deltaTime, deltaX, deltaY, distance, velocityX, velocityY].

Also don’t forget that if you’re using jQuery for handling the events the these will be located at e.originalEvent.gesture.

You can inspect the whole gesture like this:

$(document).on('swipeleft', '#appNavi1', function(e) {
  console.log(e.originalEvent.gesture);
});

Also I’m not sure exactly what you want to achieve by restricting the swipe event, but you may also want to take a look at ons-carousel.

[iceweasel]

Yes, seem like drag event detect finger immediately and fit with my app better than swipe. So, I try this one.
$(document).on(‘dragend’, ‘#appNavi1’, function(e) {

if(e.originalEvent.gesture.direction == "left"){
	    app.navi.resetToPage("detail.html", {animation: 'slide', animationOptions: {duration: '0.2'} });
} else if(e.originalEvent.gesture.direction == "right"){
    	app.navi.resetToPage("detail.html",  {animation: 'lift', animationOptions: {duration: '0.2'}});
}

});
ons-carousel just for content already exist, I want to create dynamic content for each time swipe. How ons-carousel do it?
Thanks !

[IliaSky]

Sorry for the late answer - if you want to create dynamic content each time when you swipe you can just do it by loading content when the swipe event triggers. Although it would probably be best if you already have some content which you can swipe to at the time of swiping.

Here is an example carousel which creates an item with a random color when you swipe and are located at the last available item: http://codepen.io/IliaSky/pen/YwBXzZ?editors=0010

[iceweasel]

Thanks!