Ionic - слайды «бесконечно» скользят, даже если элементов больше нет - PullRequest
Новая
       17

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

0 голосов
/ 17 октября 2018

Я делаю приложение для Ionic, и у меня возникают проблемы при наличии 2 ползунков на странице.Даже если слайдов больше нет, он продолжает скользить, делая невозможным возврат к последнему слайду.Я живу видео и код ниже.

Видео:

enter image description here

Код: 

<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 ]

0 голосов
/ 17 октября 2018

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

Немного грязный обходной путь для этого глючного компонента.

0 голосов
/ 17 октября 2018

Вы не можете скрыть элементы на слайде с помощью класса "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
...