ion-slides 分页项目符号与幻灯片内容重叠 [Ionic 4]答案

【问题标题】：ion-slides pagination bullet overlap the slides content [Ionic 4]ion-slides 分页项目符号与幻灯片内容重叠 [Ionic 4]
【发布时间】：2019-08-29 04:05:43
【问题描述】：

我还是 Ionic 的新手，我想在我的网页中添加幻灯片。我使用了带有 pager = "true" 的离子幻灯片。问题是分页项目符号与幻灯片内容重叠。我使用了检查元素来发现子弹的位置。项目符号似乎设置为位置：绝对。我不知道如何覆盖位置 CSS，因为子弹位于阴影 DOM 中。谢谢。

<ion-slides pager = "true">
   <ion-slide>
     <h1>Slide 1</h1>
   </ion-slide>
   <ion-slide>
     <h1>Slide 2</h1>
   </ion-slide>
   <ion-slide>
     <h1>Slide 3</h1>
   </ion-slide>
</ion-slides>

【问题讨论】：

介意添加滑块代码吗？
@IraW 我已编辑并添加代码

标签： angular ionic-framework pagination pager ion-slides

【解决方案1】：

我曾经遇到过这个问题。我所做的是使用 CSS 将分页指示器固定到屏幕底部

.swiper-pagination {
   position: fixed;
   bottom: 0px;
   padding-bottom: 3px;

}

【讨论】：

您是否覆盖了组件 CSS 文件中的样式？
不工作，因为它可能是离子硅化物组件问题
这在我将它放在 global.scss 中时有效，但当我将它放入组件的 .scss 中时它不起作用。关于如何使组件的样式覆盖 ion-slides 样式的任何建议？
另一个快速/讨厌的解决方法是用最长的内容填充幻灯片，例如
知道如何将它固定到 div 的底部，而不是页面的底部吗？

【解决方案2】：

将自定义类名添加到您的 <IonSlides>。例如（在 Ionic React 中）：<IonSlides className="my-custom-slider">

然后我所做的是在我的自定义 css 文件中添加一个 padding-top 和 padding-bottom。

.my-custom-slider {
     padding-top: 10px;
     padding-bottom: 10px;
 }

之后更改.swiper-navigation 在您的<IonSlides> 中的位置

.my-custom-slider .swiper-pagination {
     bottom: 0px;
 }

现在它们不再重叠:)。不过我只在 Android 上遇到过这个问题，所以我还在我的自定义类中添加了选择器 .md，使上面的示例看起来像这样：

.my-custom-slider.md { 
     padding-top: 10px;
     padding-bottom: 10px;
 }

【讨论】：

【解决方案3】：

在 ionic 中，我在 global.scss 中定义：

.swiper-pagination {
    position: relative;
    padding-top: 10px;
}

【讨论】：