0

我在管理carousel显示ImageViewer项目列表的方向更改的 Sencha Touch 2 / Phonegap 应用程序中遇到问题。

当我打开carousel一切都很好。如果我更改设备的方向（无论是在 Chrome 中通过 Ripple 插件还是在 iPhone4S 上），布局都会正确调整。

改变方向后我滑动到下一张图像时出现问题。那已经被预加载并位于一个容器中，该容器的尺寸是针对前一个方向的，所以布局被弄乱了。

在此处输入图像描述 在此处输入图像描述

请注意，如果我继续滑动到下一个图像布局再次正确，因为我carousel只预加载了单个图像。

我设法拦截changeorientation事件Ext.Viewport以对轮播采取行动以修复此行为，我尝试在轮播和 ImageViewer 上触发调整大小事件，但没有成功。我还尝试changeorientation在每次轮播的 activeItem 更改时触发该事件，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 回答