ionic slider - lockSwipes(true) disables initialSlide and slideNext() methods?

问题

Hi I'm using Ionic Slides to display todo lists and I want to disable the swipe guestures since my list items have them. Instead I want to change the slides via methods.

This is my component:

@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()
    }
}

And my view:

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

However when I lock the swipes, the initialSlide input doesn't work anymore. I'm starting off with an array of 3 days with array[1] being the current day.

Furthermore the methods slideNext() and slidePrev() also don't react. Does lockSwipes(true) completely "lock down" the slider?

Is there a way to only disable the swiping gestures of the slider?

Thanks

回答1:

Yes, by looking at the source code for lockSwipes(), it seems like the functions slideNext and slidePrev gets 'locked':

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

The function ultimately ends up calling slideTo-function thats being imported from swiper.ts, where a check against _allowSwipeToNext and _allowSwipeToPrev is made:

// 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 does not work is because in the function initSwiper imported from swiper.ts, the value of initialSlide is used as an argument to the function slideTo, and the _allowSwipe[Next|Prev] flags are checked.

For disabling only swipe gestures use onlyExternal:

onlyExternal: If true, then the only way to switch the slide is use of external API functions like slidePrev or slideNext

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

回答2:

Although I am not sure how good a practice is using setTimeout. But, this hack worked for me.

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

And template code:

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

来源：https://stackoverflow.com/questions/45516876/ionic-slider-lockswipestrue-disables-initialslide-and-slidenext-methods

标签

angular

swipe

ionic3