ionic-framework - Ionic 4 滑块分页点与文本重叠
问题描述
我有 ion-slides 组件显示一些幻灯片。每张幻灯片的内容根据服务动态呈现。
通常,底部滑块点与文本重叠。有什么方法可以确保他们总是有一些差距?
<div style="padding:15px; padding-top:30px;background-color: #232536">
<ion-slides pager="true">
<ion-slide *ngFor="let gal of core.gallery">
<div>
<img *ngIf="gal.type=='image'" src="{{gal.link}}">
<iframe *ngIf="gal.type == 'video'" style="width: 100%" [src]="getVideoUrl(gal.link)" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<ion-row>
<ion-col text-left><h2 style="color:white" >My Title</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="color:#A2A0B2" text-left>{{gal.desc}}</ion-col>
</ion-row>
</div>
</ion-slide>
</ion-slides>
解决方案
在幻灯片内容的末尾添加 <br/> 标签并从底部定位点,在 global.css 文件中添加以下 CSS
.swiper-pagination {
bottom: 3px !important;
}
推荐阅读
- python - 如何在pandas df中选择值也出现在过滤列中的行?
- javascript - 有没有办法在不重叠的情况下在绘图工具提示中显示文本?
- objective-c - 如何在 Objective-C 中缓存图像
- amazon-web-services - Kafka: Understanding Broker failure
- javascript - Clicking on next button it saves form.But once I come back to previous page and again click on same next button it shows validation error message
- javascript - 未找到 React 模块 - 如何在反应中导入模块
- html - 在 Django 视图和模板中执行一些算术后,我得到了错误的值
- python - 为什么在 __exit__ 函数中更改引用不起作用?
- laravel - Laravel 返回注册 ID
- ios - 不要在选项卡开关的导航中重新加载顶部视图中的内容