离子滑块 - lockSwipes(true) 禁用 initialSlide 和 slideNext() 方法? [英] ionic slider - lockSwipes(true) disables initialSlide and slideNext() methods?

问题描述

您好，我正在使用 Ionic Slides 来显示待办事项列表和我想禁用滑动手势，因为我的列表项有它们.相反，我想通过方法更改幻灯片.

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.

这是我的组件:

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

我的看法:

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

但是，当我锁定滑动时，initialSlide 输入不再起作用.我从 3 天的 array 开始，array[1] 是当天.

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.

此外，方法 slideNext() 和 slidePrev() 也没有反应.lockSwipes(true) 是否完全锁定"了滑块?

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?

谢谢

推荐答案

是的，通过查看 source code for lockSwipes()，看起来像函数 slideNext 和 slidePrev 被锁定":

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

函数最终调用 slideTo-从 swiper.ts，其中检查 _allowSwipeToNext 和 _allowSwipeToPrev制作:

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 不起作用是因为在从 swiper.ts，使用initialSlide的值作为函数 slideTo 的参数，并检查 _allowSwipe[Next|Prev] 标志.

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.

要禁用仅滑动手势，请使用 onlyExternal:

For disabling only swipe gestures use onlyExternal:

onlyExternal:如果为true，则切换幻灯片的唯一方法是使用外部APIslidePrev 或 slideNext 等函数

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

这篇关于离子滑块 - lockSwipes(true) 禁用 initialSlide 和 slideNext() 方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！