私はAngularJSで作られたアプリケーションを持っていますが、これにはビューを切り替えるための矢印キーナビゲーションがあります。
タッチデバイスのスワイプを使用してこのナビゲーションを実装します。 jGestures ライブラリを試しましたが、スワイプではうまくいきません。 jquery mobile を使用しないことをお勧めします。
スワイプを実装する他の方法はありますか?
編集:スワイプをきれいに検出しません。 iPadを含む複数のデバイスでテストし、アクションを実行するには複数回のスワイプが必要です(私の場合はルーティング)。
私は自分のニーズに合わせてこの関数を作成しました。
気軽に使用してください。モバイルデバイスで最適に動作します。
function detectswipe(el,func) {
swipe_det = new Object();
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
var min_x = 30; //min x swipe for horizontal swipe
var max_x = 30; //max x difference for vertical swipe
var min_y = 50; //min y swipe for vertical swipe
var max_y = 60; //max y difference for horizontal swipe
var direc = "";
ele = document.getElementById(el);
ele.addEventListener('touchstart',function(e){
var t = e.touches[0];
swipe_det.sX = t.screenX;
swipe_det.sY = t.screenY;
},false);
ele.addEventListener('touchmove',function(e){
e.preventDefault();
var t = e.touches[0];
swipe_det.eX = t.screenX;
swipe_det.eY = t.screenY;
},false);
ele.addEventListener('touchend',function(e){
//horizontal detection
if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
if(swipe_det.eX > swipe_det.sX) direc = "r";
else direc = "l";
}
//vertical detection
else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
if(swipe_det.eY > swipe_det.sY) direc = "d";
else direc = "u";
}
if (direc != "") {
if(typeof func == 'function') func(el,direc);
}
direc = "";
swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
},false);
}
function myfunction(el,d) {
alert("you swiped on element with id '"+el+"' to "+d+" direction");
}
関数を使用するには、次のように使用します
detectswipe('an_element_id',myfunction);
detectswipe('an_other_element_id',my_other_function);
スワイプが検出された場合、関数「myfunction」がパラメーターelement-idおよび「l、r、u、d」(左、右、上、下)で呼び出されます。
Hammerjsを試しましたか?タッチの速度を使用してスワイプジェスチャーをサポートします。 http://eightmedia.github.com/hammer.js/
Hammer.jsに基づいた、angular-gesturesと呼ばれるAngularJSモジュールもあります。 https://github.com/wzr1337/angular-gestures
プラグインを必要としない最も簡単なソリューション:
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};
私が知っている恥知らずなプラグインですが、私が書いたjQueryプラグインを検討したいと思うかもしれません。
https://github.com/benmajor/jQuery-Mobile-Events
JQuery Mobileは不要で、jQueryのみが必要です。
私はあなたのソリューションが好きで、それを私のサイトに実装しました-しかし、少し改善されています。私のコードを共有したいだけです:
function detectSwipe(id, f) {
var detect = {
startX: 0,
startY: 0,
endX: 0,
endY: 0,
minX: 30, // min X swipe for horizontal swipe
maxX: 30, // max X difference for vertical swipe
minY: 50, // min Y swipe for vertial swipe
maxY: 60 // max Y difference for horizontal swipe
},
direction = null,
element = document.getElementById(id);
element.addEventListener('touchstart', function (event) {
var touch = event.touches[0];
detect.startX = touch.screenX;
detect.startY = touch.screenY;
});
element.addEventListener('touchmove', function (event) {
event.preventDefault();
var touch = event.touches[0];
detect.endX = touch.screenX;
detect.endY = touch.screenY;
});
element.addEventListener('touchend', function (event) {
if (
// Horizontal move.
(Math.abs(detect.endX - detect.startX) > detect.minX)
&& (Math.abs(detect.endY - detect.startY) < detect.maxY)
) {
direction = (detect.endX > detect.startX) ? 'right' : 'left';
} else if (
// Vertical move.
(Math.abs(detect.endY - detect.startY) > detect.minY)
&& (Math.abs(detect.endX - detect.startX) < detect.maxX)
) {
direction = (detect.endY > detect.startY) ? 'down' : 'up';
}
if ((direction !== null) && (typeof f === 'function')) {
f(element, direction);
}
});
}
次のように使用します。
detectSwipe('an_element_id', myfunction);
または
detectSwipe('another_element_id', my_other_function);
スワイプが検出された場合、関数myfunction
がパラメーターelement-idと'left'
、'right'
、'up'
または'down'
で呼び出されます。
ハンマータイム!
Hammer JSを使用しましたが、ジェスチャーで動作します。詳細はこちらから https://hammerjs.github.io/
JQuery mobileよりもはるかに軽量で高速であることは良いことです。 Webサイトでもテストできます。