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个变量

你-page.scss

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

注意：如果上述内容无效，则必须使用width: 100px !important;。我无法想到其他选择。

Answer 3

尝试一下：

ion-slide >:first-child {
    width: 100%;
}

Answer 4

slidesPerView option 默认为 1；要一次显示更多幻灯片，请在滑块选项中增加此项。

HTML：

<ion-slides pager [options]="slideOpts">...

打字稿：

slideOpts:any = {slidesPerView: 7}

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

4 个答案: