Слайды не отображаются в ionic4

Я перевожу исходный код с ionic3 на ionic4.

Следующая страница слайда не отображается в ionic4.
Как мне это исправить?
Я надеюсь, что вы скажете мне.

(Дополнительная информация)
Я думаю, у этого, кажется, есть проблема со стилем, и это появляется где-то еще.
Итак, я также добавлю информацию в SCSS.
Почему я не могу использовать стиль ionic3, как в ionic4?

(больше информации)
Если я закомментирую все walkthrough.page.scss, изображение появится в модальной части.

Текущее состояние целевого экрана

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;
  }
}

Всего 1 ответ


При использовании ViewChild для отслеживания изменений вам необходимо подключить объявленную вами переменную slides в файле .ts, добавив ссылку на шаблон на элемент ion-slides следующим образом:

<ion-slides pager="true" #slides>
// the slides
</ion-slides>

Оформление документов ViewChild Angular для получения дополнительной информации.


Есть идеи?

10000