如何在iPhone X中通过* ngIf显示隐藏的按钮

时间:2019-07-30 05:52:36

标签: ios ionic4

我正在创建一个带有离子幻灯片的简单屏幕。在最后一张幻灯片上,我想显示一个按钮以弹出屏幕。

我已经使用以下代码完成了此操作:

在我的HTML中

<section>
    <ion-slides (ionSlideDidChange)="change()" (ionSlideReachEnd)="end()" class="slider" pager="true" paginationType="bullet" parallax="true"
      centeredSlides="true" effect="slide" [options]="slideOpts">
      <ng-container *ngFor="let image of imgs;">
        <ion-slide>
          <section>
            <h1><img src={{image}}></h1>
          </section>
        </ion-slide>
      </ng-container>
    </ion-slides>
    <div class="skip" *ngIf="!isSlideLast()" (click)="skip()">Skip</div>
    <div class="next" *ngIf="!isSlideLast()" (click)="next()">Next</div>
    <button class="start" *ngIf="isSlideLast()" (click)="skip()">Start</button>
  </section>

在我的.ts中,我有这些:

  max_slide:any =3;
  last: boolean = false;
  callback: any; 
  imgs:any = [];
  slideOpts = {
    initialSlide: 0,
    speed: 400
  };

  isSlideLast() {
    return this.last
  }

  async skip() {
    console.log("skip is pressed")
    this.callback().then(() => {
      this.navCtrl.pop();
    });
  }

  change() {
    this.slides.getActiveIndex().then(val => {
      console.log(val)
      if (val < this.max_slide-1) {
        this.last = false;
      }
    })
  }

  end() {
    console.log("end is pressed")
    this.last = true;
  }

  next() {
    console.log("next is pressed")
    this.slides.slideNext();
  }

其他iPhone和android没有问题。该按钮显示在最后一张幻灯片上。但是在使用iPhone X进行测试时,该按钮根本没有显示。跳过和下一个链接也不会隐藏。

0 个答案:

没有答案