0

左または右からスライドできるiOSアプリで効果を再現する方法またはプラグインを見つけようとしています。その方向に十分にスライドした場合、指を離すと次のペインにロックされます。

十分にスクロールしたことを認識させてから、フォーカスする新しい位置を設定するにはどうすればよいですか? この種のものに適した jQuery プラグインはありますか? jQuery Mobile には、この種の機能がないようです。

私が念頭に置いているレイアウトは、オーバースクロールが非表示に設定されている単一の DIV の内側に 4 ～ 5 つの DIVS が隣り合っているようなものです。次に、次のペインにスライドし始めると、トランジション効果で左/右の CSS 位置を変更するイベントを発生させ、タブを更新して新しい新しいペインが選択されたことを示すことができます。

4

1 に答える 1

1

タッチ デバイスとデスクトップ デバイスの両方をサポートするには、この目的のためにtouchstart/mousedown、touchmove/mousemove、および touchend/mouseupイベントを使用する必要があります。

  • touchstartでは、JQueryEventType オブジェクトを使用して初期X座標とY座標を格納し、有効なスワイプを示すパラメータを設定します ( init=trueとします) 。
  • touchmoveでは、最初に有効なスワイプかどうかを確認し ( init==true の場合)、再度 JQueryEventType オブジェクトを使用し てカーソル/指の新しいXおよびY位置を取得します。

ここで、注意が必要な部分があります。これらの新しい X および Y位置を使用して、変位と方向を計算します。これらの値を使用して、DIV のオフセットを設定するか、CSS 3.0 translate(x,y) を使用します。

たとえば、デルタ X > 10 (エラーをフィルター処理するためのしきい値) とデルタ Y ~ 0の場合、右に移動します。すべての DIV をdelta Xで RIGHT に変換します。

アニメーションは使用しないことをお勧めします。必要に応じて表示されないからです。さらに、遷移遅延を非常に短く保ち、おそらくタイミング機能はありません。これにより、動きに対する鮮明な反射が得られます。

「十分なスライド」をいつ想定するかという問題については、選択した一定の値を取るか、画面幅を使用して計算する必要があると思います。デルタ X またはデルタ Y がしきい値ホールド値以上の場合... 跳ね返ります。この値より大きい場合は...前方に跳ね返ります。

于 2014-02-12T17:49:19.350 に答える