离子滑块 - lockSwipes(true) 禁用 initialSlide 和 slideNext() 方法？

Question

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

这是我的组件：

@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 输入不再起作用。我从 array 3 天开始，array[1] 是当天。

此外，方法 slideNext() 和 slidePrev() 也没有反应。 lockSwipes(true) 是否完全 "lock down" 滑块？

有没有办法只禁用滑块的滑动手势？

谢谢

Answer 1

是的，通过查看 lockSwipes() 的 source code，似乎函数 slideNext 和 slidePrev 得到 'locked':

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

该函数最终调用了从 swiper.ts 导入的 slideTo 函数，其中对 _allowSwipeToNext 和 _allowSwipeToPrev 进行了检查：

// 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-输入不起作用是因为在从[=30=导入的函数initSwiper中，initialSlide的值被用作函数slideTo，并检查 _allowSwipe[Next|Prev] 标志。

要仅禁用滑动手势，请使用 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;
}

Answer 2

尽管我不确定使用 setTimeout 的做法有多好。但是，这个 hack 对我有用。

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

和模板代码：

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

Answer 3

您可以像这样使用 allowTouchMove 将选项滑动到 false :

模板代码：

<ion-slides [options]="slideOpts">

ts 代码：

slideOpts = {
allowTouchMove: false
};

离子滑块 - lockSwipes(true) 禁用 initialSlide 和 slideNext() 方法？

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

swipe

ionic3

angular