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()返回承诺，因此您需要解决这些问题。另外，我们希望听幻灯片更改时的声音，例如可以使用可用的方法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;
  });
}

ionic滑块在上一张幻灯片ionic 4中隐藏下一个按钮

1 个答案: