Условная навигация на ионном слайдере

Question

Я настроил свой слайдер Ionic так, чтобы у меня были кнопки навигации, когда я разрабатываю PWA и хочу включить взаимодействие мыши с рабочими столами. Я хотел запустить несколько условных выражений, чтобы скрыть кнопку PREV, когда слайдер находится в начале, и скрыть кнопку NEXT, когда на последнем слайде. Я проверил решение в Скрыть и показать по клику в ионном 2 и заставил некоторый код работать для этого.

Моя проблема в том, что кнопка PREV не скрывается автоматически при первом представлении слайдера Ionic. Я не могу заставить это работать для меня, так как я инициировал проверку с помощью метода slideChanged (), и я не знаю, как скрыть кнопку PREV при инициации (до взаимодействия со слайдером).

Вот мой код:

Файл TS:

slideChanged() {
    if (this.slides.isEnd()) {
        this.hideNext = !this.hideNext;
    }
    else if (this.slides.isBeginning()) {
        this.hidePrev = !this.hidePrev;
    }
    else {
        console.log("slide changed");
        this.hideNext = true;
        this.hidePrev = true;
    }
}

HTML-шаблон

<ion-icon *ngIf="hidePrev" name="ios-arrow-back" float-left class="slideNav prevSlide" (click)="prevSlide()"></ion-icon>
<ion-icon *ngIf="hideNext" name="ios-arrow-forward" float-right class="slideNav nextSlide" (click)="nextSlide()"></ion-icon>
<ion-slides (ionSlideDidChange)="slideChanged()" pager #imageSlides>
    <ion-slide *ngIf="data.video">
        <video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg">
            <source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4">
        </video>
    </ion-slide>
    <ion-slide *ngFor="let image of data.featured_image">
        <img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/>
    </ion-slide>
</ion-slides>

Answer 1

Вы можете использовать ionSlideReachEnd и ionSlideReachStart события:

Файл TS

slideChanged() {
  if (this.slides.isEnd()) {
    this.hideNext = !this.hideNext;
  }
  else if (this.slides.isBeginning()) {
    this.hidePrev = !this.hidePrev;
  }
  else {
    console.log("slide changed");
    this.hideNext = true;
    this.hidePrev = true;
  }
}

reachedStart() {
    this.hidePrev = true;
}

reachedEnd() {
    this.hideNext = true;
}

HTML-шаблон

<ion-icon *ngIf="hidePrev" name="ios-arrow-back" float-left class="slideNav prevSlide" (click)="prevSlide()"></ion-icon>
<ion-icon *ngIf="hideNext" name="ios-arrow-forward" float-right class="slideNav nextSlide" (click)="nextSlide()"></ion-icon>
<ion-slides (ionSlideDidChange)="slideChanged()" (ionSlideReachEnd)="reachedEnd()" (ionSlideReachStart)="reachedStart()" pager #imageSlides>
  <ion-slide *ngIf="data.video">
    <video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg">
        <source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4">
    </video>
  </ion-slide>
  <ion-slide *ngFor="let image of data.featured_image">
    <img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/>
  </ion-slide>
</ion-slides>