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

【问题标题】：Ionic 2 - how to prevent page changes on ion-slides by swipe gesture?Ionic 2 - 如何通过滑动手势防止离子幻灯片上的页面更改？
【发布时间】：2017-08-30 23:46:00
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： android ionic-framework pagination ionic2

【解决方案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>

因此，当页面正在构建时，我锁定滑动，当有人单击下一步/返回时，我解锁滑动，转到下一张幻灯片并将其锁定。

希望对你有帮助

【讨论】：

让我试试！我会告诉你的
我认为最好只使用 this.slides.onlyExternal = true;而不是 this.slides.lockSwipes(true)。它仅阻止外部使用，例如触摸或单击，而您不会每次都进行锁定和解锁
不要尝试在构造函数中访问 dom。使用 ionViewDidLoad 或 ngOnInit 访问 html 元素。
在 Ionic 5 上也能完美运行。感谢分享！

【解决方案2】：

你应该使用函数 ionViewDidLoad() 因为当你把 "this.slides.lockSwipes(true);"在构造函数中，页面还没有加载，尝试这样做。

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

【讨论】：

【解决方案3】：

使用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);
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

例子：

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

【讨论】：