离子滑块上的条件导航答案

【问题标题】：Conditional nav on ionic slider离子滑块上的条件导航
【发布时间】：2021-10-23 01:03:56
【问题描述】：

当我正在开发 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>

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案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>

【讨论】：

尝试了您的建议，但对其进行了编辑以隐藏到达开始（）函数上的箭头：this.hidePrev = !this.hidePrev;它最初可以工作 - 但是，当导航回第一张幻灯片时 - 后退按钮会重新出现。我认为它是被 slideChanged 函数调用的。
您可以保留我的功能并像这样更改您的 slideChanges 功能： if (this.slides.isEnd()) { this.hideNext = true; } else { this.hideNext = false;} if (this.slides.isBeginning()) { this.hidePrev = true; } 其他 { this.hidePrev = false; }
哈哈是的，我已经用逻辑做了类似的事情。对于我的应用中只有 1-2 张图片的滑块，我可能需要多写一些...
我不得不颠倒你的布尔语句才能让你的建议起作用@Jerome。但它实际上是比我想出的更清洁的解决方案。

【解决方案2】：

使用 Ionic 2，像这样更改 slideChanged()

slideChanged() {
  this.hideNext = !this.slides.isEnd();
  this.hidePrev = !this.slides.isBeginning();
}

使用 Ionic 3、4 和 5（使用 Promises），像这样改变 slideChanged()

slideChanged() {
  this.slides.isEnd()
    .then(s => this.hideNext = !s }

  this.slides.isBeginning()
    .then(s => this.hidePrev = !s }
}

【讨论】：