离子幻灯片样式宽度自动设置

Posted 2023-03-06

【中文标题】离子幻灯片样式宽度自动设置

【英文标题】：Ion-slide style width is set automatically

【发布时间】：2018-03-05 05:58:34

【问题描述】：

我最近将 Ionic 2 项目更新为 Ionic 3，而对 ion-slides 的更改破坏了我的应用程序。

加载应用时，幻灯片上的样式标签中设置了特定宽度，这破坏了我的样式。

这是我的 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>

你会注意到不知何故 ion-slide 标签上设置了一个style="width: 171px;"。是什么原因造成的，有没有办法关闭它？

【问题讨论】：

请在 Firefox 或 chrome 中打开并右键单击滑块。那么请写下你看到的类名。

@Dr.Geek 问题中列出了来自 chrome 的 html，您能否更具体地说明您还想看什么？

style="width: 171px;" 是根据 ion-slides 宽度计算得出的。所以要改变它只需为 ion-slides 元素设置样式。

【参考方案1】：

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

HTML：

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

打字稿：

slideOpts:any = slidesPerView: 7

【参考方案2】：

试试这个：

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

【参考方案3】：

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

更动态的解决方案是使用 unset 值。

试着写在你的yourpage.scss：

ion-slide  
width: unset !important;

它应该删除它！

【讨论】：

您的答案有效！但是它会修改应用程序中每张幻灯片的宽度：/ 有没有办法将其仅应用于特定的滑块？

确保你没有在你的 app.scss 中写这个！因为这是整个应用程序！将其应用到您的页面中，例如 home.scss。其次，如果您只想要特定的幻灯片，他们会在幻灯片中添加一个 id 或类并为此调用相同的代码:)

问题是，无论我把这种风格放在哪里（在 app.scss 或任何地方），它都会修改应用程序中的所有滑块：/

【参考方案4】：

如果不是您需要的width，则如下所示进行更改。

注意：这里没有Saas 变量

your-page.scss

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

注意：如果上述方法不起作用，那么您必须使用width: 100px !important;。没有其他我能想到的选择。

【讨论】：

我认为这会起作用，但我宁愿不参加 !importants 的霰弹枪课程。我想看看是否有一种“正确”的方式来获得我想要的东西，并且可能会理解这个“功能”以防我以后需要它。

Ionic 团队没有为此提供任何Saas 变量。这意味着您在这里没有任何其他选择。有时我们需要使用!important。这不是你想的那么邪恶。

不用!important也可以试试上面的解决方案

您对!important 的回答是迄今为止唯一有效的方法。

很高兴听到它有帮助:)