离子2 - 如何通过滑动手势防止离子幻灯片上的页面更改？

Question

我在许多不同的资源中看到了解决方案,包括Stack Overflow.这部分对我有用:我无法向左或向右滑动以切换页面.没关系 !但是,如果用户单击按钮,按住按钮并滑动,这将导致分页.(我只是使用Android进行测试)

根据许多来源的解决方案是:

<ion-slides [options]="{onlyExternal: false}">
</ion-slides>

让我用截图来说明这一点......

如果我在这里滑动,什么都不会发生

现在,如果我按住并滑动红色按钮,这将导致分页.

Answer 1

由于 externalOnly 不再在 Ionic 4 中工作，我查看了 Swiper API 文档，发现它更改为allowTouchMove现在。

所以： <ion-slides [options]="{allowTouchMove:false}"

Answer 2

我这样做的方式是:

在我的页面的.ts文件中,我有一张幻灯片,我这样做

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class Page{
  @ViewChild(Slides) slides: Slides;

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

  nextSlide(){
    this.slides.lockSwipes(false);
    this.slides.slideNext();
    this.slides.lockSwipes(true);
  }
}

在HTML中,您可以通过按钮调用该功能

<button ion-button block (tap)="nextSlide()">NEXT</button>

因此,当页面构建时我会锁定滑动,当有人点击下一个/后退时我解锁滑动,转到下一张幻灯片并将其锁定.

希望能帮助到你