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

Question

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

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

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

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

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

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

Answer 1

我这样做的方式是：

在我的页面的.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>

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

希望有所帮助

Answer 2

由于externalOnly在Ionic 4中不再可用，因此我查看了Swiper API文档，发现它现在已更改为allowTouchMove。

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

Answer 3

您应该使用函数ionViewDidLoad（），因为当您放置“ this.slides.lockSwipes（true）;”时，在构造函数中，页面尚未加载，请尝试执行此操作。

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

Answer 4

使用onlyExternal选项。您可以通过ViewChild访问它。

@ViewChild('slider') slider: Slides;

ionViewDidLoad() {
  this.slider.onlyExternal = true;
  this.slider.paginationClickable = false;
}

nextSlide() {
  this.slider.slideNext();
}

<ion-slides pager #slider>
  ...
</ion-slides>

您可以致电nextSlide()，例如按幻灯片中的按钮。

更新：paginationClickable不起作用。 ：/

当前，这是真正控制行为的最佳解决方案。

ionViewDidLoad() {
  this.slider.lockSwipes(true);
}

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

Answer 5

另一种实现方法是添加swiper-no-swiping类：

示例：

<ion-slides #slides class="swiper-no-swiping">
...
</ion-slides>