更改设备方向时幻灯片消失
Slides disappear when changing orientation of device
我正在使用 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;
}
知道为什么会这样吗or/and我该如何解决这个问题?
所以我在我的移动应用程序中使用了其中一个,这是我可以回答的:
- 滑块会在您的应用程序运行时并排构建所有幻灯片。
- 每张幻灯片都有自己的属性,以使其位于其同级幻灯片的右侧和左侧。 (看这张图)
如您所见,每张幻灯片都有设置的宽度、左侧位置、平移等
- 当您更改设备方向时,为每张幻灯片设置的值仍然相对于原始方向。
所以您可以做的是将 <preference name="orientation" value="portrait" />
放入您的 config.xml 文件中以防止出现横向方向,或者您可以尝试在使用 [=11] 改变方向时重新加载幻灯片框=]
我正在使用 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;
}
知道为什么会这样吗or/and我该如何解决这个问题?
所以我在我的移动应用程序中使用了其中一个,这是我可以回答的:
- 滑块会在您的应用程序运行时并排构建所有幻灯片。
- 每张幻灯片都有自己的属性,以使其位于其同级幻灯片的右侧和左侧。 (看这张图)
如您所见,每张幻灯片都有设置的宽度、左侧位置、平移等
- 当您更改设备方向时,为每张幻灯片设置的值仍然相对于原始方向。
所以您可以做的是将 <preference name="orientation" value="portrait" />
放入您的 config.xml 文件中以防止出现横向方向,或者您可以尝试在使用 [=11] 改变方向时重新加载幻灯片框=]