时间戳

首页 > 解决方案 > 离子滑块上的条件导航

angular - 离子滑块上的条件导航

问题描述

当我正在开发 PWA 并希望在桌面上包含鼠标交互时，我已将 Ionic 滑块配置为具有导航按钮。我想运行一些条件来在滑块开始时隐藏 PREV 按钮，并在最后一张幻灯片上隐藏 NEXT 按钮。我在Hide 中查看了解决方案，并在 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>

标签： angularionic-frameworkionic3

解决方案

您可以使用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>

推荐阅读