OnsenUI：旋转木马不更新方向变化

Question

我正在使用全屏 OnsenUI 轮播。问题是当我 swipe/change 轮播项目然后更改方向或调整 window 的大小时，它看起来不太好。此问题也与官方 OnsenUI 轮播示例有关。

这是我正在关注的代码：

<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 是来自 OnsenUI 网站的笔。

注意：我使用的是 OnsenUI 版本 1.3.14

Answer 1

它的行为似乎是由于项目大小的缓存值所致。该修复程序需要对内部 Onsen 轮播行为进行一些修改，但是 Onsen 1 的开发已经完成，因此进行一些此类修改应该是安全的。您需要对调整大小事件执行以下操作以修复它：

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

这是应用了修复程序的 demo。

如果您正在使用 angular，那么您只需使用 var="carousel" 属性，您就可以在您的控制器中使用 carousel。

如果您不喜欢 angular 那么选择它有点棘手，但并非不可能：

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

希望这对您有所帮助。

或者您可以切换到 Onsen 2，这样可以在框架本身中快速修复此类问题。

更新：

此错误已在 Onsen 2 中修复。

OnsenUI：旋转木马不更新方向变化

OnsenUI: Carousel does not update on orientation change

carousel

onsen-ui