ionic4 中不显示幻灯片

Posted 2023-03-13

【中文标题】ionic4 中不显示幻灯片

【英文标题】：Slides are not displayed in ionic4

【发布时间】：2020-05-24 06:50:40

【问题描述】：

我正在将源代码从 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;
  

【问题讨论】：

你能分享一下walkthroughSlides数据吗

谢谢，我添加了 walkthrough.page.scss。

不客气。

我可以帮忙。但什么是查询？

我想显示上述源代码的幻灯片页面（walkthrough.page.html），但是不行。

【参考方案1】：

当使用ViewChild 监控更改时，您需要通过在 ion-slides 元素上添加对它的模板引用来连接您在 .ts 文件中声明的 slides 变量，如下所示：

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

结帐The ViewChild Angular docs 了解更多信息。

【讨论】：

请您回复。但这行不通。它只是显示一个白色模态。

原因似乎是 CSS。看来ionic3的风格没用。我该怎么办。

啊，在那种情况下，我认为错误在于您已经声明了特定的样式来覆盖 Ionic 生成的类名，但是您需要将这些样式放在全局 variables.scss 文件中生效。可以试试吗？

感谢您的回答。我很高兴，因为我很烦恼。我应该将特定样式从 walkthrough.page.scss 移动到 global.scss 吗？我还在上述问题正文中添加了 global.scss。

根据我的经验，我需要将任何 Ionic 特定的类名移动到 global.scss。例如，您应该能够使用本地 .scss 文件中的 ion-slide 选择器和 Ionic 提供的 CSS 自定义选项（请参阅 this page）进行样式设置，但需要将 .swiper-pagination-bullet-active 之类的内容移动到 global.scss跨度>