2017-08-04 1 views
1

Salut J'utilise Ionic Slides pour afficher les listes de tâches et je souhaite désactiver les invitations à glisser car mes éléments de liste en possèdent. Au lieu de cela, je veux changer les diapositives via des méthodes.curseur ionique - lockSwipes (true) désactive les méthodes initialSlide et slideNext()?

Ceci est mon élément:

@ViewChild(Slides) slides: Slides; 

days: SbCalendarDay[] = [] //this is a list of todo's of each day 

ngAfterViewInit() { 
    this.slides.lockSwipes(true); 
} 

slide(direction:string){ 
    if(direction === 'prev'){ 
     this.slides.slidePrev() 
    }else{ 
     this.slides.slideNext() 
    } 
} 

Et moi:

<div class="sb-calendar-day"> 
    <ion-slides [initialSlide]="1" (ionSlideDidChange)="slideChanged($event)" (ionSlideWillChange)="slideWillChange($event)"> 
     <ion-slide *ngFor="let day of days"> 
      <sb-list [list]="day.events" (sbListEvent)="listEvent($event)"></sb-list> 
     </ion-slide> 
    </ion-slides> 
</div> 

Cependant, lorsque je verrouille les grands coups, l'entrée initialSlide ne fonctionne plus. Je commence avec un array de 3 jours avec array[1] étant le jour courant.

De plus, les méthodes slideNext() et slidePrev() ne réagissent pas non plus. Est-ce que lockSwipes(true) "verrouille" complètement le curseur?

Est-il possible de désactiver uniquement les mouvements de balayage du curseur?

Merci

Répondre

2

Oui, en regardant le source code pour lockSwipes(), il semble que les fonctions slideNext et slidePrev obtient 'BLOQUE':

lockSwipes(shouldLockSwipes: boolean) { 
    this._allowSwipeToNext = this._allowSwipeToPrev = !shouldLockSwipes; 
} 

La fonction se termine en fin de compte d'appel slideTo -fonction des thats étant importé de swiper.ts, où une vérification contre _allowSwipeToNext et _allowSwipeToPrev est faite:

// Directions locks 
if (!s._allowSwipeToNext && translate < s._translate && translate < minTranslate(s)) { 
    return false; 
} 
if (!s._allowSwipeToPrev && translate > s._translate && translate > maxTranslate(s)) { 
    if ((s._activeIndex || 0) !== slideIndex) return false; 
} 

initialSlide -input ne fonctionne pas parce que dans la fonction initSwiper importée de swiper.ts, la valeur de initialSlide est utilisée comme argument de la fonction slideTo, et les drapeaux _allowSwipe[Next|Prev] sont vérifiés.

Pour désactiver utiliser uniquement balayez gestes onlyExternal:

onlyExternal: Si cela est vrai, alors la seule façon de changer la diapositive est l'utilisation de l'API externe fonctionne comme slidePrev ou slideNext

ngAfterViewInit() { 
    this.slides.onlyExternal = true; 
} 
+1

wow! C'est la meilleure réponse possible avec des explications que j'aurais pu espérer, merci beaucoup! –

+1

Entièrement d'accord, réponse étonnante. +1 – sebaferreras

0

Bien que je ne sois pas sûr de la façon dont une pratique utilise setTimeout. Mais, ce hack a fonctionné pour moi.

setTimeout(()=> { 
     this.slides.lockSwipes(true); 
}, 100); 

Et le code du modèle:

<ion-slides (ionSlideDidChange)="slideChanged($event)" [initialSlide]="1">