12

jQuery モバイルを使用して、HTML5、JavaScript、および CSS で画像ギャラリーを作成しました。IE Phonegap プラットフォームは問題ありません。
画像は動的に読み込まれ、次のように読み込まれます:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

マウスの上スワイプ スライダー:

TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com

それに伴う問題は、2 つのイベントが同時に発生しているため、画像をクリックして次のページに移動できないことです。

2番目の問題は、ギャラリーが存在しない他の領域を除いて、ギャラリーが配置されている場所からページを上下にスワイプできないことです。

より明確にするために、Pulse ニュース アプリケーションのように 5 ～ 10 個のギャラリーを追加したニュース アプリケーションを作成しています。

4

3 に答える 3

0

この問題の詳細のいくつかについて少し混乱していますが、他の誰かがこの問題を抱えている場合に備えて、この質問が完全に回答されないのを見るのは嫌いです.

このプラグイン (mouseSwipe) は、モバイル デバイスのデフォルトのドラッグ機能をオーバーライドします。通常、デバイスはマウス開始イベントでページをスクロールしますが、このプラグインはその動作をオーバーライドして、要素全体のクリックの動きを検出します。その機能が中断されるため、反対方向へのドラッグ (スクロール用) も機能しなくなります。プラグインがまだ所有者によって維持されている場合 (そうではないようです)、更新してこの問題を修正するか、必要な機能を手動で作成するために使用できるイベントを発行することができます。

これも、クリックして指定したページに移動する際に問題を引き起こしている原因だと思います。

私の正直な意見が必要な場合は、おそらくモバイル デバイスのスワイプ機能のみに焦点を当てた別のライブラリを選択し、デスクトップ機能を個別に処理します (ただし、PhoneGap を使用している場合は、公開していない可能性があります)。これをデスクトップ用の Web プラットフォームに)。Web 上にある場合は、modernizr (など) を使用して、デバイスがタッチ入力をサポートしているかどうかを確認してから、次のようなものを実装できます。

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

タッチをサポートしていないデバイスの場合は、ボタン/矢印ベースのナビゲーションに戻ることができます (結局のところ、デスクトップ ユーザーとして、マウスで前後にドラッグできるとは思っていません)。

于 2013-05-06T16:34:49.107 に答える
0

上下にスワイプできない理由は、「スワイプ」イベントが「movestart」または「move」イベントを占有している可能性があります。

このプラグインを使用しているときに、一度同様の問題に遭遇しました: http://stephband.info/jquery.event.swipe/

Web サイトで指摘されている解決策は、イベントで preventDefault メソッドを呼び出して、ここに示すようにブロックされないようにすることでした。

jQuery('.mydiv')
.on('movestart', function(e) {
  // If the movestart is heading off in an upwards or downwards
  // direction, prevent it so that the browser scrolls normally.
  if ((e.distX > e.distY && e.distX < -e.distY) ||
      (e.distX < e.distY && e.distX > -e.distY)) {
    e.preventDefault();
  }
});

jQuery モバイルの経験はありませんが、問題は似ていると思います。

于 2014-10-15T22:24:05.310 に答える