1

私は、ビューの「モザイク」で構成されるWebアプリでこの種のアクションを取得しようとしています。これは、6行のビューの合計6列です。ナビゲーションはデスクトップ ブラウザではうまく機能しますが、Mobile Safari では難しくなります。

これは私が取得しようとしているアクションです:

ユーザーが (すばやく) スワイプ -> ページを 1 ビュー上/下/左/右に移動
ユーザーがタッチ & ドラッグ -> ページを指に追従 ユーザーが指を離す (タッチエンド) -> 慣性スクロールが停止し、ページが 1 ビュー上/下/左/右に移動

現在、私は Hammer.js を使用しています。これは、 prevent_default を true に設定するとうまく機能しますが、ドラッグ中にコンテンツが指に追従しません。

コードを使用してドラッグイベントでページを移動するのと、タッチエンドでスクロールをハイジャックしようとするのと、どちらが簡単/優れていますか?

4

1 に答える 1

0

あなたは正しい方向に進んでいます！私はhammer.jsが大好きです。ユーザーの指でページを移動したい場合は、コードを使用してドラッグイベントでページを移動します。たとえば、次のようなことができます。

hammer.bind('drag', function(ev) {
    x = ev.position.x;
    y = ev.position.y;
    mosaic.style.webkitTransform = 'translate3d('+(x) +'px, '+(y) + 'px, 1px)';

「モザイク」はタイルを保持するコンテナです。トリッキーな部分は、どの画像に「スナップ」するかを決定することです。おそらく、jQuery .offset（）を使用して、タッチ座標とモザイクの間の関係を判別することもできますか？

さらにヘルプが必要な場合は、Hammer.jsの最新版を確認してください。次のことも評価できます。

center      {Object}        center position of the touches. contains pageX and pageY
deltaTime   {Number}        the total time of the touches in the screen
deltaX      {Number}        the delta on x axis we haved moved
deltaY      {Number}        the delta on y axis we haved moved
velocityX   {Number}        the velocity on the x
velocityY   {Number}        the velocity on y
于 2013-02-15T19:55:52.540 に答える