Ionic - 即使没有更多元素，幻灯片也会 "infinitely" 滑动

Question

我正在制作一个 Ionic 应用程序，当页面中有 2 个滑块时我遇到了问题。即使没有更多的幻灯片，它也会继续滑动，从而无法返回到最后一张幻灯片。我在下面有一个视频和代码。

视频：

代码：

<ion-row padding-left>
<ion-col style="padding-bottom: 0;">
    <ion-slides zoom="false" style="padding: 0; ">
        <ion-slide [class.oculto]="!oculto" *ngFor="let video of lista.videos">
           <button class="boton-slider" (click)="verVideo(video, lista.nombre)">
              <ion-thumbnail>
                 <img [src]="video.miniatura">
              </ion-thumbnail>
              <div *ngIf="video.visto" class="video-visto-lista">
                 <ion-chip color="primary">
                    <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                    <span class="label-chip">Visto</span>
                 </ion-chip>
              </div>
               <p class="titulo-video">{{video.titulo}}</p>
            </button>
         </ion-slide>
      </ion-slides>
   <ion-slides style="height: 0;"></ion-slides>
</ion-col>

请帮忙！

Answer 1

您无法使用 "oculto" class 隐藏幻灯片上的元素。 您必须使用过滤管来过滤这些幻灯片：https://angular.io/guide/pipes

不使用：

.oculto {
    display: none;
}

管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filterOculto'
})
export class FilterOcultoPipe implements PipeTransform {
    transform(items: any): any {

        return items.filter(item => !item.oculto);

    }
}

因此您的代码将是：

<ion-row padding-left>
<ion-col style="padding-bottom: 0;">
    <ion-slides zoom="false" style="padding: 0; ">
        <ion-slide [class.oculto]="!oculto" *ngFor="let video of lista.videos | filterOculto">
           <button class="boton-slider" (click)="verVideo(video, lista.nombre)">
              <ion-thumbnail>
                 <img [src]="video.miniatura">
              </ion-thumbnail>
              <div *ngIf="video.visto" class="video-visto-lista">
                 <ion-chip color="primary">
                    <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                    <span class="label-chip">Visto</span>
                 </ion-chip>
              </div>
               <p class="titulo-video">{{video.titulo}}</p>
            </button>
         </ion-slide>
      </ion-slides>
   <ion-slides style="height: 0;"></ion-slides>
</ion-col>

请注意 您只需将其添加到 *ngFor:

  | filterOculto

Answer 2

好吧，事实证明这是因为我正在调整每张幻灯片的大小以使 img 变小，并使用以下内容：

ion-slide {
margin-right: 15px !important;
width: 65.3% !important;
}

但 Ionic 似乎使用 slidesPerView 和 spaceBetween 计算最大滑动，因为我没有在 HTML 标签中设置它们，它采用默认值分别是1和0。

所以我所做的就是将这两个属性添加到我的 HTML 标签中：

<ion-slides spaceBetween="15" slidesPerView="1.75" zoom="false" style="padding: 0; ">

并将我的幻灯片样式编辑为以下内容，以使其适合：

ion-slide {
margin-right: 15px !important;
width: 65.3% !important;
}

如果您想知道为什么我还要在 scss 上编辑幻灯片的宽度和边距，那是因为在这样做之前我使用的是 spaceBetween 和 slidesPerView 但他们正在做由于这两个小家伙的错误，图像很大然后调整大小并移动以适应我在这些值上设置的值的糟糕效果。

这个有问题的组件有点肮脏的解决方法。

Ionic - 即使没有更多元素，幻灯片也会 "infinitely" 滑动

Ionic - Slides are "infinitely" sliding even if no more elements

infinite

cordova

ionic-framework