我正在将源代码从ionic3迁移到ionic4。以下幻灯片页面未在ionic4中显示。我如何解决它?我希望你能告诉我。
(其他信息)我认为,这似乎与样式有关,并且出现在其他地方。因此,我还将向SCSS添加信息。为什么不能使用ionic4中的ionic3样式?
(更多信息)如果我注释掉所有walkthrough.page.scss,则图像将出现在模态的一部分中。Current status of the target screen
app.component.ts(调用页面)
... async error => { const walkthroughModal = await this.modalCtrl.create({component: WalkthroughPage, componentProps:{prev_page: 'login'} }); await walkthroughModal.present(); } ...
walkthrough.page.ts
@Component({ selector: 'page-walkthrough', templateUrl: 'walkthrough.page.html', styleUrls: ['walkthrough.page.scss'], providers: [CustomNativeStorage] }) export class WalkthroughPage { ... @ViewChild('slides', {static: false}) slides: IonSlides; ...
walkthrough.page.html
<ion-slides pager="true"> <ion-slide *ngFor="let slide of walkthroughSlides" [style.background-image]="slide.img"> <div class="walkthrough-content-card"> <div class="text-container"> <div class="walkthrough-title"> {{ slide.title }} </div> <div class="walkthough-text"> {{ slide.text }} </div> </div> <div class="button-container"> <ion-button class="button_continue" color="bright" (click)="slideNext()"> CONTINUE </ion-button> </div> </div> </ion-slide> </ion-slides>
walkthrough.page.scss
$iphone4: "(device-width: 320px) and (device-height: 480px)"; $iphone5: "(device-width: 320px) and (device-height: 568px)"; $iphone6_7: "(device-width: 375px) and (device-height: 667px)"; .ios, .md { .swiper-slide.swiper-slide-active{ width: 100% !important; } ion-slide { background-size: cover; background-position: top center; } .walkthrough-content-card{ background-color: rgba(255,255,255,0.85); position: absolute; width: 100%; bottom: 0px; } .text-container{ padding: 5%; .walkthrough-title{ font-size: 1.6rem; font-weight: bold; margin-bottom: 10px; } .walkthough-text{ font-size: 1.5rem; margin-bottom: 30px; } } .button-container{ width: 100%; text-align: center; margin-bottom: 15px; .button_continue{ min-width: 50%; @extend .remove-text-transform, .remove-button-curves !optional; } } } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 10%; } .swiper-pagination-bullet-active{ background: #FF9800; } .slide-zoom{ height: 100% !important; } @media #{$iphone4}{ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 14.5% !important; } } @media #{$iphone5}{ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 11.5% !important; } } @media #{$iphone6_7}{ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 10% !important; } }
global.scss
/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";
/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';
/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
//Universal Styles
.ios .japanese-fonts {
font-family: "Hiragino Sans", "HiraKakuProN", sans-serif !important;
}
.md .japanese-fonts {
font-family: "Noto Sans CJK", "モトヤフォント", sans-serif !important;
}
.ios,
.md {
body {
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
.title-center {
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
}
.back-button-style {
z-index: 10;
margin-left: 5px;
padding-left: 0px;
}
.remove-button-curves {
border-radius: 0px;
}
.remove-text-transform {
text-transform: none;
}
.remove-box-shadow {
box-shadow: none;
}
.explanation-text {
width: 100%;
font-size: 18px;
text-align: center;
padding: 20px 40px;
color: var(--ion-color-text_gray);
}
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
.tabs-md[tabsHighlight="true"] .tab-highlight {
background-color: #4FC3F7 !important;
}
.tab-badge {
background-color: #FF4141 !important;
}
.loading-wrapper {
background: transparent !important;
position: relative !important;
bottom: 10%;
}
ion-backdrop {
opacity: 0.7 !important;
}
.custom-spinner-box {
text-align: center;
}
.loading-wrapper {
color: white !important;
}
.custom-spinner-font {
color: white !important;
font-size: 1.8rem;
text-align: center;
top: 0;
position: relative;
}
}
我正在将源代码从ionic3迁移到ionic4。以下幻灯片页面未在ionic4中显示。我如何解决它?我希望你能告诉我。 (其他信息)我认为,这似乎有一个...
[使用ViewChild
监视更改时,您需要通过在ion-slides元素上添加对其的模板引用,来连接在.ts文件中声明的slides变量,如下所示: