ionic 滑块隐藏最后一张幻灯片中的下一个按钮 ionic 4

Question

ionic 滑块在最后一张幻灯片中隐藏下一个按钮并在第一张幻灯片中隐藏上一个按钮尝试使用 ngIf 实现此功能，但它不起作用 ionic 4

<ion-slides #slides>
(...)
</ion-slides>
<button ion-button *ngIf="slides.isBeginning()">prev</button>
<button ion-button *ngIf="slides.isEnd()">Next</button>

Answer 1

isBeginning() 和 isEnd() return promises 所以你需要解决这些问题。我们还想听幻灯片何时更改，我们可以使用可用方法 ionSlideWillChange 来做到这一点。因此，当幻灯片即将更改时调用一个函数，并检查幻灯片是结束还是开始，并根据那个 hide/display 按钮。

<ion-slides #slides (ionSlideWillChange)="doCheck()">

我们使用两个布尔标志 disablePrevBtn 和 disableNextBtn 的助手，我们将它们作为按钮的条件：

 <button ion-button *ngIf="!disablePrevBtn">prev</button>
 <button ion-button *ngIf="!disableNextBtn">Next</button>

我们还需要使用 ViewChild 来引用我们的幻灯片，因此导入 IonSlides 并用 ViewChild:

标记

import { ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

// ...

@ViewChild('slides') ionSlides: IonSlides;

我们可能希望将 disablePrevBtn 标记为最初的 true，并将 disableNextBtn 标记为 false:

disablePrevBtn = true;
disableNextBtn = false;

最后是带有两个 promise 的函数，根据情况 return 或者 true 或 false。基于这些布尔值，我们切换布尔标志。跟踪幻灯片并切换布尔值：

doCheck() {
  let prom1 = this.ionSlides.isBeginning();
  let prom2 = this.ionSlides.isEnd();

  Promise.all([prom1, prom2]).then((data) => {
    data[0] ? this.disablePrevBtn = true : this.disablePrevBtn = false;
    data[1] ? this.disableNextBtn = true : this.disableNextBtn = false;
  });
}

ionic 滑块隐藏最后一张幻灯片中的下一个按钮 ionic 4

ionic slider hide next button in last slide ionic 4

ionic-framework

angular

ionic4