Question

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

Answer 1

我有解决方案！ 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>

在我看来。ts

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

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

app.scss中的非滚动类：

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

Answer 2

我们的项目中的某些滑块存在相同的问题。第一张幻灯片没问题，您可以左右滑动而无需垂直滚动，但是任何其他幻灯片都可以上下滚动整个页面。对我们来说解决的是添加以下CSS：

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

.swiper-wrapper的宽度为：100％，然后在滚动时被推到左侧（屏幕外）。因此，滑块上的任何进一步滑动都不会与滑动包装器配合，从而导致整个页面移动。

如何在iOS中滑动离子滑动时禁用垂直滚动？

2 个答案: