こんにちは、ExtJS 6（モダンツールキット）でのモバイルデバイス用のイメージギャラリーの作成について説明しようと思います。 記事を作成する主な理由は、標準ツールを使用して画像を表示する際のジェスチャのサポートがないことです。 標準のカルーセルコンポーネントでのスケーリングのタッチイベントサポートはありません。 この記事は、この欠点を修正することを目的としています。
タッチイベント
現時点では、メインのタッチイベントは多くありません。画像で確認できるメインリストは次のとおりです。
ExtJSでのタッチイベントのサポート
ExtJS 5でタッチイベントのサポートが追加されました。ExtJS6.0.1.250の最新バージョンでは、次のタッチイベントが存在します（図から類推できます）。
これは以前の
記事で説明されているため、テストアプリケーションの作成は省略します。
画像ギャラリーを表示するために、最新のツールキットは独自の
カルーセルコンポーネントを提供します。これは、スケーリングと画像回転の欠如の最も重要な欠点です。 この問題は公式フォーラムですでに解決されていますが、
Sencha Touch 2.0.1.1の古いバージョンについてのみです。 個人的なブログを持たずに、ここに書き直したプラグインを残します。 彼が誰かのために役立つことを願っています。 次の作品リストを実施しました。
- ExtJS 6をサポートするために作業ロジックを書き直しました
- スケーリングと反転に関連するバグを修正
- 画像カウンター、この画像を回転およびダウンロードするためのボタンを含むツールバーを表示できるオプションのパラメーターがカルーセルに追加されました（ドキュメントを表示している場合に便利です）
- ローテーションイベントと画像ダウンロードイベントを追加
Githubリンク
PS：バグを見つけたら、コメントやgithubに書いてください。いつでも喜んでお手伝いします。
デモンストレーションデモンストレーション
