49

ビューを切り替えるための矢印キーナビゲーションを備えたAngularJSで作成されたアプリケーションがあります。

タッチデバイスのスワイプを使用して、このナビゲーションを実装したいと考えています。jGesturesライブラリを試してみましたが、スワイプがうまくいきません。jquery mobileを使用しないことをお勧めします。

スワイプを実装する他の方法はありますか?

EDIT：スワイプをきれいに検出しません。iPadを含む複数のデバイスでテストしましたが、アクション（私の場合はルーティング）を実行するには複数のスワイプが必要です。

4

8 に答える 8

67

私は自分のニーズに合わせてこの機能を作りました。

お気軽にご利用ください。モバイルデバイスでうまく機能します。

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」(左、右、上、下) で呼び出されます。

例: http://jsfiddle.net/rvuayqeo/1/

私 (UlysseBN) は、より現代的な JavaScript を使用するこのスクリプトに基づいて、このスクリプトの新しいバージョンを作成しました。この回答を編集する必要があると思われる場合は、お知らせください。あなたが元の作成者であり、最終的に編集する場合は、私の回答を削除します。

于 2014-11-24T22:06:42.877 に答える
29

Hammerjsを試しましたか？タッチの速度を使用してスワイプジェスチャをサポートします。 http://eightmedia.github.com/hammer.js/

于 2013-02-28T11:53:06.667 に答える
6

恥知らずなプラグインは知っていますが、私が書いた jQuery プラグインを検討することをお勧めします。

https://github.com/benmajor/jQuery-Mobile-Events

jQuery Mobile は不要で、jQuery のみが必要です。

于 2013-02-26T08:45:38.930 に答える
6

注: EscapeNetscape の回答に大いに触発され、コメントで最新の JavaScript を使用して彼のスクリプトを編集しました。ユーザーの関心と4時間のjsfiddle.netの大規模なダウンタイムのために、私はこれに答えました。すべてが変わるため、元の回答を編集しないことにしました...

detectSwipeこれはかなりうまく機能する関数です（私のWebサイトの1つで使用されています）。ご利用前に一読されることをお勧めします。自由に確認/回答を編集してください。

// usage example
detectSwipe('swipeme', (el, dir) => alert(`you swiped on element with id ${el.id} to ${dir} direction`))

// source code

// Tune deltaMin according to your needs. Near 0 it will almost
// always trigger, with a big value it can never trigger.
function detectSwipe(id, func, deltaMin = 90) {
  const swipe_det = {
    sX: 0,
    sY: 0,
    eX: 0,
    eY: 0
  }
  // Directions enumeration
  const directions = Object.freeze({
    UP: 'up',
    DOWN: 'down',
    RIGHT: 'right',
    LEFT: 'left'
  })
  let direction = null
  const el = document.getElementById(id)
  el.addEventListener('touchstart', function(e) {
    const t = e.touches[0]
    swipe_det.sX = t.screenX
    swipe_det.sY = t.screenY
  }, false)
  el.addEventListener('touchmove', function(e) {
    // Prevent default will stop user from scrolling, use with care
    // e.preventDefault();
    const t = e.touches[0]
    swipe_det.eX = t.screenX
    swipe_det.eY = t.screenY
  }, false)
  el.addEventListener('touchend', function(e) {
    const deltaX = swipe_det.eX - swipe_det.sX
    const deltaY = swipe_det.eY - swipe_det.sY
    // Min swipe distance, you could use absolute value rather
    // than square. It just felt better for personnal use
    if (deltaX ** 2 + deltaY ** 2 < deltaMin ** 2) return
    // horizontal
    if (deltaY === 0 || Math.abs(deltaX / deltaY) > 1)
      direction = deltaX > 0 ? directions.RIGHT : directions.LEFT
    else // vertical
      direction = deltaY > 0 ? directions.UP : directions.DOWN

    if (direction && typeof func === 'function') func(el, direction)

    direction = null
  }, false)
}
#swipeme {
  width: 100%;
  height: 100%;
  background-color: orange;
  color: black;
  text-align: center;
  padding-top: 20%;
  padding-bottom: 20%;
}
<div id='swipeme'>
  swipe me
</div>

于 2019-11-05T20:50:55.970 に答える