Javascript 确定滑动事件是向左滑动还是向右滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36970425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Determine whether a swipe event is for a left swipe or a right swipe
提问by Bill Noble
I am using Angular 2 and ionic 2 and am trying to capture left and right swipes. I can capture a swipe but can't work out how to determine if it is a left or right swipe.
我正在使用 Angular 2 和 ionic 2，并试图捕捉左右滑动。我可以捕获滑动，但无法确定如何确定它是向左滑动还是向右滑动。
In my html I have:
在我的 html 中，我有：
<ion-content (swipe)="swipeEvent($event)">
This calls swipeEventevery time a swipe occurs.
swipeEvent每次发生滑动时都会调用此方法。
My swipeEventjavascript code looks like this:
我的swipeEventjavascript 代码如下所示：
swipeEvent(event){
alert('swipe');
}
How can I determine if it is a left or right swipe.
如何确定是向左滑动还是向右滑动。
回答by Will.Harris
It looks like the gestures are built on top of HammerJSas stated in the Ionic 2 docs.
看起来手势是建立在HammerJS之上的，如Ionic 2 文档中所述。
You can target specific gestures to trigger specific functionality. Built on top of Hammer.js...
您可以针对特定手势来触发特定功能。建立在 Hammer.js 之上...
When you trigger a swipe event an object gets passed to the bound method it contains an option e.directionwhich is a numeric value corresponding to a swipe direction.
当您触发滑动事件时，一个对象会被传递给绑定方法，它包含一个选项e.direction，该选项是与滑动方向对应的数值。
Below is the list of direction constants which are defined herein the HammerJS docs
下面是其定义方向常量列表这里的HammerJS文档
Name Value DIRECTION_NONE 1 DIRECTION_LEFT 2 DIRECTION_RIGHT 4 DIRECTION_UP 8 DIRECTION_DOWN 16 DIRECTION_HORIZONTAL 6 DIRECTION_VERTICAL 24 DIRECTION_ALL 30
Name Value DIRECTION_NONE 1 DIRECTION_LEFT 2 DIRECTION_RIGHT 4 DIRECTION_UP 8 DIRECTION_DOWN 16 DIRECTION_HORIZONTAL 6 DIRECTION_VERTICAL 24 DIRECTION_ALL 30
Example
例子
Given your ion-contentsetup
鉴于您的ion-content设置
swipeEvent(e) {
if (e.direction == 2) {
//direction 2 = right to left swipe.
}
}
Useful tip
有用的提示
Alternatively (doesn't look like Ionic have covered this in their gestures doc), you can use HammerJS eventsin the HTML tag to target a specific swipe direction.
或者（看起来 Ionic 在他们的手势文档中没有涵盖这一点），您可以在 HTML 标签中使用HammerJS 事件来定位特定的滑动方向。
<ion-content (swipeleft)="swipeLeftEvent($event)">
Only found this out by trial and error and it seemed to work for most events!
只能通过反复试验发现这一点，它似乎适用于大多数事件！
回答by vuhung3990
html
html
<ion-navbar *navbar>
<ion-title>Main</ion-title>
</ion-navbar>
<ion-content padding class="main">
// height: 300px; background-color: #000; => visible for test
<div (pan)='swipeEvent($event)'></div>
</ion-content>
typescrip
打字稿
export class MainPage {
constructor(public nav: NavController) { }
swipeEvent($e) {
// swipe left $e.direction = 2;
// pan for get fired position
console.log($e.deltaX+", "+$e.deltaY);
}
}
if deltaX > 0 swipe right else swipe left.
i like to use paninstead of swipebecause i want to make a slide image same as Scrollyeah
如果 deltaX > 0 向右滑动，否则向左滑动。我喜欢使用pan而不是swipe因为我想制作与Scrollyeah相同的幻灯片图像
回答by vorillaz
You cab bind separate event handlers with Ionic, like:
您可以使用 Ionic 绑定单独的事件处理程序，例如：
<ion-content on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()">
You may also use on-swipelike:
你也可以使用on-swipe像：
<ion-content on-swipe="swiped($event)">
$scope.swiped = function($e) {
var what = '';
switch ($e.gesture.direction) {
case 'up':
what = 'Swiped up';
break;
case 'down':
what = 'Swiped down';
break;
case 'left':
what = 'Swiped left';
break;
case 'right':
what = 'Swiped right';
break;
default:
what = 'Swiped ???';
break;
}
alert(what)
}
Using Ionic 2
使用离子 2
<ion-content (swipe)="swipeEvent($event)">
swipeEvent($e) {
var what = '';
switch ($e.gesture.direction) {
case 'up':
what = 'Swiped up';
break;
case 'down':
what = 'Swiped down';
break;
case 'left':
what = 'Swiped left';
break;
case 'right':
what = 'Swiped right';
break;
default:
what = 'Swiped ???';
break;
}
alert(what)
}
回答by Grant
Just to update - as of Ionic 3.19.0, functionality is as follows:
只是为了更新 - 从 Ionic 3.19.0 开始，功能如下：
<div (swipe)="swipeEvent($event)" />
and
和
swipeEvent($e) {
if($e.offsetDirection == 4){
// Swiped right, for example:
this.week.prevWeek();
} else if($e.offsetDirection == 2){
// Swiped left, for example:
this.week.nextWeek();
}
}
Also - an even quicker inline solution, if you're only concerned with left and right swipes:
此外 - 一个更快的内联解决方案，如果你只关心左右滑动：
<div (swipe)="($event.direction === 4) ? calendar.back() : calendar.forward()" />
