OnsenUI: Karussell aktualisiert nicht auf Orientierungsänderung

Question

Ich arbeite mit Fullscreen OnsenUI Karussell. Das Problem ist, wenn ich Karussell-Objekt wische/ändere und dann die Ausrichtung ändere ODER die Größe des Fensters ändere, sieht es nicht gut aus. Dieses Problem ist auch mit dem offiziellen OnsenUI-Karussell-Beispiel.

Dies ist der Code, den ich folgende bin:

<ons-carousel swipeable overscrollable auto-scroll fullscreen initial-index="1" var="carousel"> 
    <ons-carousel-item style="background-color: gray;"> 
     <div class="item-label">GRAY</div> 
    </ons-carousel-item> 
    <ons-carousel-item style="background-color: #085078;"> 
     <div class="item-label">BLUE</div> 
    </ons-carousel-item> 
    <ons-carousel-item style="background-color: #373B44;"> 
     <div class="item-label">DARK</div> 
    </ons-carousel-item> 
    <ons-carousel-item style="background-color: #D38312;"> 
     <div class="item-label">ORANGE</div> 
    </ons-carousel-item> 
    <ons-carousel-cover> 
     <div class="cover-label">Swipe left or right</div> 
    </ons-carousel-cover> 
    </ons-carousel> 
</ons-page> 

This der Stift aus der OnsenUI Seite ist.

HINWEIS: Ich verwende OnsenUI Version 1.3.14

Answer 1

Es scheint, wie es auf diese Weise aufgrund eines im Cache gespeicherten Wert der Größe Punkt verhält. Das Update erfordert einige Hacks mit dem internen Onsen-Karussell-Verhalten, aber die Entwicklung von Onsen 1 ist abgeschlossen, also sollten einige Hacks wie diese sicher sein. Was Sie auf einem Grßenänderungsereignis tun müssen, um es zu beheben ist folgendes:

var i = carousel._scroll/carousel._currentElementSize; 
    delete carousel._currentElementSize; 
    carousel.setActiveCarouselItemIndex(i); 

Hier ist eine demo mit dem Update, das angewandt. Wenn Sie eckig verwenden, können Sie einfach das var="carousel" Attribut verwenden und Sie können carousel in Ihrem Controller verwenden.

Wenn Sie nicht eckig wie dann die Auswahl es ein wenig schwierig, aber nicht unmöglich:

var carousel = angular.element(document.getElementById('carousel')).data('ons-carousel'); 

Hope this geholfen.

Alternativ können Sie auch einfach auf Onsen 2 wechseln, wo solche Probleme schnell im Framework selbst behoben werden können.

Update:

Dieser Fehler wurde in Onsen 2.