如何在iOS中禁用垂直滚动，同时滑动离子幻灯片？

Question

在ionic 3中，使用iPhone滑动离子滑块时会发生垂直滚动，这会导致应用程序ui体验。这是一个严重的错误，我已经尝试了很多想法，在谷歌上没有人工作。请任何知道这个问题的人帮助我。

Answer 1

我们的项目中有一些滑块也有同样的问题。第一张幻灯片是好的，你可以左右滑动，不需要任何垂直滚动，但是任何进一步的幻灯片都会向上和向下滚动整个页面。对我们来说，修复它的方法是添加以下css：

.swiper-wrapper{
    width:auto !important;
}

.swiper-wrapper的宽度: 100%，然后在滚动时被推到左侧(和屏幕外)。因此，滑块上的任何进一步滑动都会随着滑动包装器的移动而消失，从而导致整个页面移动。

Answer 2

我已经有解决方案了！幻灯片移动时发出的ionSlideDrag。当幻灯片移动时，我调用一个函数来添加一个类到我的内容中，这个类添加了

overflow-y: hidden.

幻灯片更改结束时发出的ionSlideDidChange。这意味着当幻灯片切换结束时，我调用一个函数来移除这个类，然后我的内容又可以滚动了。

对于添加和删除类，我实现了jquery。( How can I use jQuery with Ionic 2?)

这是我的代码示例：

在我的view.html

<ion-slides slidesPerView="4" spaceBetween="20" (ionSlideDrag)="dragging()" (ionSlideDidChange)="endDragging()">
  <ion-slide *ngFor="let action of actionPages">
    <img [src]="url + action.imgSmall">
    <h1></h1>
  </ion-slide>

</ion-slides>

在我的view.ts

dragging(){
 $("#contenitore").addClass("no-scroll")
}

endDragging(){
  $("#contenitore").removeClass("no-scroll")
}

App.scss中的no-scroll类：

 .no-scroll {
    div.scroll-content {
        overflow-y: hidden;
    }
}