离子滑块隐藏最后一张幻灯片中的下一个按钮 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() 返回 promises 所以你需要解决这些问题。此外，我们还想听到幻灯片何时发生变化，例如，我们可以使用可用的方法ionSlideWillChange 来做到这一点。因此，当幻灯片即将更改时调用一个函数，并检查幻灯片是结束还是开始，并据此隐藏/显示按钮。

<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 的函数，根据具体情况，它们都返回 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;
  });
}