0

Sencha Touch 2 / Phonegap アプリケーションで、 ImageViewerアイテムcarouselのリストを表示する方向の変更を管理する際に問題が発生しています。

私が開くと、carouselすべてが大丈夫です。デバイスの向きを変更すると (Ripple プラグインを介した Chrome または iPhone4S の両方で)、レイアウトは正しく適応します。

向きを変更した後、次の画像にスワイプすると問題が発生します。それは事前にロードされており、前の向きに合わせて寸法が決められたコンテナに収まっているため、レイアウトがめちゃくちゃになっています。

ここに画像の説明を入力 ここに画像の説明を入力

carousel単一の画像をプリロードするだけなので、次の画像レイアウトにスワイプし続けると、再び正しいことに注意してください。

changeorientationこの動作を修正するためにカルーセルでアクションを実行するためにイベントをインターセプトするExt.Viewportことができました。カルーセルと ImageViewer の両方でサイズ変更イベントをトリガーしようとしましたが、成功しませんでした。また、カルーセルのactiveItemが変更されるたびにchangeorientationイベントをトリガーしようとしましたが、それも機能しませんでした。Ext.Viewportこの問題を回避するために何ができるかについて何かアイデアはありますか?

4

2 に答える 2

1

カルーセル内のすべてのアイテムを繰り返し処理し、Viewport で orientationchange が発生した後に ImageViewer アイテムで resize() メソッドを呼び出すことで解決しました。私の関数は次のようになります。

handleOrientationChange: function(viewport, orientation, width, height){
    var items = this.getItems();
    for (var i=0;i<items.getCount();i++){
        var obj = items.getAt(i);
        if (obj instanceof Ext.view.ux.ImageViewer){
            console.log("Resize");
            obj.resize();
        }
    }
}

アイテムが Imageviewer であることを確認する必要があります。カルーセル インジケーターも ItemCollection で返されます。

これが最も効率的な方法であると 100% 確信しているわけではありませんが、うまくいきます。

于 2013-03-27T22:29:21.710 に答える
0

これを .css ファイルに追加できます

.my-carousel-item{background:url(images/loading.png) no-repeat center center}@media screen and (orientation: portrait){.my-carousel-item-img{background-size:100% auto}}@media screen and (orientation: landscape){.my-carousel-item-img{background-size:auto 100%}}.x-portrait .my-carousel-item-img{background-size:100% auto}.x-landscape .my-carousel-item-img{background-size:auto 100%}.my-carousel-item-img{background-position:center center}.x-carousel-indicator>*{background-color:orange !important;opacity:0.4}.x-carousel-indicator>.x-carousel-indicator-active{opacity:1}
于 2014-09-24T13:42:14.623 に答える