タッチイベントをサポートするExtJS 6のギャラリー

こんにちは、ExtJS 6(モダンツールキット)でのモバイルデバイス用のイメージギャラリーの作成について説明しようと思います。 記事を作成する主な理由は、標準ツールを使用して画像を表示する際のジェスチャのサポートがないことです。 標準のカルーセルコンポーネントでのスケーリングのタッチイベントサポートはありません。 この記事は、この欠点を修正することを目的としています。



タッチイベント



現時点では、メインのタッチイベントは多くありません。画像で確認できるメインリストは次のとおりです。

画像






ExtJSでのタッチイベントのサポート



ExtJS 5でタッチイベントのサポートが追加されました。ExtJS6.0.1.250の最新バージョンでは、次のタッチイベントが存在します(図から類推できます)。





これは以前の記事で説明されているため、テストアプリケーションの作成は省略します。

画像ギャラリーを表示するために、最新のツールキットは独自のカルーセルコンポーネントを提供します。これは、スケーリングと画像回転の欠如の最も重要な欠点です。 この問題は公式フォーラムですでに解決されていますが、 Sencha Touch 2.0.1.1の古いバージョンについてのみです。 個人的なブログを持たずに、ここに書き直したプラグインを残します。 彼が誰かのために役立つことを願っています。 次の作品リストを実施しました。



Githubリンク



PS:バグを見つけたら、コメントやgithubに書いてください。いつでも喜んでお手伝いします。



デモンストレーション
デモンストレーション

画像




All Articles