Question

在我开发PWA时，我已将Ionic滑块配置为具有导航按钮，并希望在台式机上包括鼠标交互。我想运行一些条件，以在滑块开始时隐藏PREV按钮，而在最后一张幻灯片时隐藏NEXT按钮。我在Hide and show on click in the ionic 2签出了解决方案，并为此做了一些代码。

我的问题是，首次显示Ionic滑块时，PREV按钮不会自动隐藏。我无法使用此功能，因为我已经使用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>

离子滑块上的条件导航

1 个答案: