1

我正在使用一个ion-slide-box来显示一些图像。当我不改变设备的方向时，一切正常。如果我这样做，图像有时会消失。再次更改方向会使它们再次出现。

HTML：

  <div class="outer" ng-if="!data.navbarHidden">
    <div class="middle">
      <div class="inner">
        <ion-slide-box show-pager="false" on-slide-changed="pageChanged($index)" active-slide="data.currentPageIndex" style="width: {{data.maxWidth}}px; height: {{data.maxHeight}}px;">
          <ion-slide ng-repeat="page in allPages">
            <img on-double-tap="onDoubleTap()" class="slideImage" ng-src="{{dataPath}}{{page.link}}" alt="{{page.title}}" on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()"/>
          </ion-slide>
        </ion-slide-box>
      </div>
    </div>
  </div>

CSS：

outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
}

.slideImage{
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width:auto; 
    max-width:100%;
    max-height:100%; 
    height:auto;
    -webkit-backface-visibility:hidden;
}

知道为什么会发生这种情况或/以及如何解决这个问题吗？

4

1 回答 1

2

所以我在我的移动应用程序中使用了其中之一，这是我可以回答的：

  1. 当您的应用程序运行时，滑块会并排构建所有幻灯片。
  2. 每张幻灯片都有自己的属性，以将其保持在其兄弟幻灯片的右侧和左侧。（看这张图片）

在此处输入图像描述

如您所见，每张幻灯片都有设置的宽度、左侧位置、平移等。

  1. 当您更改设备方向时，为每张幻灯片设置的值仍然相对于原始方向。

因此，您可以做的是放入<preference name="orientation" value="portrait" />您的 config.xml 文件以防止发生横向方向，或者您可以尝试在方向更改时重新加载幻灯片框使用$ionicSlideBoxDelegate.update();

于 2016-03-31T23:51:57.877 回答