离子滑动样式宽度自动设置

Question

我最近将Ionic 2项目更新为Ionic 3,离子幻灯片的更改已经破坏了我的应用程序.

应用程序加载时,幻灯片上的样式标记中会设置特定的宽度,这会破坏我的样式.

这就是我的HTML中的内容:

<ion-slides pager>
  <ion-slide *ngFor="let image of offer.Gallery">
    <img [src]="image.Url"/>
  </ion-slide>
</ion-slides>

这就是它呈现的方式:

<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager="">
    <div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper">
        <ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;">
            <div class="slide-zoom">
                <img src="IMG">
            </div>
        </ion-slide>
    </div>
    ... Pagination ...
</ion-slides>

您会注意到离子滑动标签在某种程度上有一style="width: 171px;"组.造成这种情况的原因是什么？有办法将其关闭吗？

Answer 1

您可以直接在Ionic 3中处理离子标签!

更动态的解决方案是使用未设置的值.

试着写你的yourpage.scss:

ion-slide { 
width: unset !important;
}

它应该删除它!

Answer 2

如果不是width您需要的，只需按如下所示进行更改即可。

注意：没有任何Saas变量

你的页面.scss

  .md,
  .ios,
  .wp {
      .swiper-slide .swiper-slide-active{
         width: 100px;//your width here
     }
   }

注意：如果上述不起作用，那么您必须使用width: 100px !important;. 我想不出其他选择。