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

好吧，事实证明这是因为我正在调整每张幻灯片的大小以使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，但是它们却做得很糟糕会影响图片较大的地方，然后由于这两个小家伙的过错而调整大小并移动到适合我在这些值上设置的值。

这个越野车组件有点脏。

Answer 2

不能使用“ oculto”类隐藏幻灯片上的元素。 您必须使用过滤器管道过滤那些幻灯片：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

离子-即使没有更多元素，幻灯片也会“无限”滑动

2 个答案: