Ионные - Слайды «бесконечно» скользят, даже если нет элементов

Я делаю Ionic App, и у меня проблемы с наличием 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>

Помогите, пожалуйста!

Всего 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

Хорошо, оказалось, что это было потому, что я изменял размер каждого слайда, чтобы сделать img меньше:

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

Но Ionic, кажется, вычисляет максимальное скольжение с помощью slidesPerView и spaceBetween и, поскольку я не использовал их в теге HTML, он принимал значения по умолчанию, spaceBetween 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 но они делали ужасный эффект, когда изображения большие, а затем spaceBetween и slidesPerView в соответствии с тем, что я установленный на этих значениях из-за этих двух маленьких ошибок ребят.

Немного грязный рабочий стол для этого багги-компонента.


Есть идеи?

10000