6

我还是 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>
4

3 回答 3

4

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

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

}

于 2019-04-08T06:43:26.153 回答
1

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

.swiper-pagination {
    position: relative;
    padding-top: 10px;
}
于 2021-03-02T13:49:10.890 回答
1

将自定义类名添加到您的<IonSlides>. 例如（在离子反应中）：<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;
 }
于 2020-01-08T15:28:29.540 回答