web-dev-qa-db-ja.com

Androidハニカムwebview / webkit?での水平/垂直の指スワイプスクロールの実装

私はWebViewに基づいてHoneycombタブレットアプリケーションを実装する予定です(つまり、基本的にはHTML5 Webベースのアプリケーションtablet専用です)。

私は指をスワイプすることで水平および垂直スクロールを実装しようとしています。理解を深めるために、サンプルのアウトラインを作成しました。

Horizontal Scrolling by Swiping


この画像は、左右のページを垂直にスクロールできるHoneycombのネイティブ設定アクティビティに似たものを示しています Vertical Scrolling by Swiping

あらゆる種類のガイドまたはリソースを歓迎します。ありがとう

20
Hossain Khan

iScroll を見てください:

iScroll 4は、元の iScroll コードを完全に書き直したものです。スクリプトの開発は、モバイルWebkit(iPhone、iPad、Android)が固定幅/高さ要素内のコンテンツをスクロールするネイティブな方法を提供しないために始まりました。この不幸な状況により、すべてのWebアプリがposition:absoluteヘッダーおよび/またはフッターと、コンテンツのスクロール中央エリアを持つことができなくなります。

最新のAndroidリビジョンがこの機能をサポートしていますが(サポートは最適ではありませんが)、Appleはdivに1本の指のスクロールを追加することに消極的です...

12
shaunix

ここに私がこれまでに見つけたものがあります:

スクロールの実装方法によって異なります。スワイプイベントを添付する場合は、よく知られているライブラリを使用して実装する最も簡単な方法です。

  • jqTouch-左右にスクロールするフック可能なスワイプ左右イベントがあります(すべてのWebkitベースのようです)アニメーションはiOSデバイスでのみ機能します)。 プロジェクトはまだベータ版であり、あまりアクティブではないことに注意してください。編集:これはSencha Labsの一部でもあり、Sencha Touchを積極的に管理しています。
  • Sencha Touch-モバイルおよびタブレットのほぼすべてをより適切にサポートします。 (注:オープンソースアプリでは無料ですが、商用アプリでは無料です-編集:実際に商用ライセンスを持っています。ライセンスの詳細については、サイトを参照してください)
  • jQueryMobile-これらは非常に安定しており(現時点ではRC1で)、左右にスワイプイベントがありますが、上下にスワイプしません。左右にスワイプする必要がある場合は、タップしてホールドをタップし、jQMに進みます。彼らは最高のコミュニティサポートを持っています。
  • RAW JS-最後に、生のjavascriptが必要な場合は、 HTML5Rocksの記事 にアクセスして、タッチの方法についてより深く理解してくださいイベントが機能します。

役に立てば幸いです。スワイプが終了するのを待ちたくないので、私はまだスクロールダウンの実装に苦労しています。代わりに、インスタントスクロールフィードバックを実装しようとしていますが、RAW JS座標を使用して非常に接近していますが、満足のいくものではありません。

5
Hossain Khan

Hammer JSは私にとって便利です。

http://eightmedia.github.io/hammer.js/

5
Ian Jamieson

IScrollの作成者からは、SwipeViewはニース専用の代替手段のようです。 デモ1 および デモ2 をご覧ください。

私はまだテストしていませんが、きっとそうします。私のiPadではデモがうまく動作するので。

2
kleliboux

このライブラリは非常に便利です。 https://github.com/cubiq/2-way-iScroll

垂直スクロールと水平スワイプのケースを処理します。

0
Felix