Как отключить вертикальную прокрутку при скольжении ионного слайда в iOS?

Question

В ionic 3, при использовании iPhone, когда скользящий ионный слайдер выполняет вертикальную прокрутку, это вызывает опыт работы с приложением.это серьезная ошибка, я попробовал много идей в поиске, никто не работает.Пожалуйста, помогите мне кто-нибудь знает об этой проблеме

Answer 1

У нас была такая же проблема с некоторыми ползунками в нашем проекте.Первый слайд был в порядке, вы можете скользить влево и вправо без вертикальной прокрутки, однако любые другие слайды будут прокручивать всю страницу вверх и вниз.Для нас было исправлено добавление следующего CSS:

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

. Оболочка .swiper имела ширину: 100%, а затем при прокрутке ее сдвигали влево (и за пределы экрана).Таким образом, любые дальнейшие движения по ползунку выполнялись без использования обертки-свипера, в результате чего вся страница перемещалась.

Answer 2

У меня есть решение!ionSlideDrag Издается при перемещении слайда.Когда слайд перемещается, я вызываю функцию, которая добавляет класс к моему контенту, который добавляет

overflow-y: hidden.

ionSlideDidChange Излучается, когда заканчивается изменение слайда.это означает, что когда изменение слайда заканчивается, я вызываю функцию, которая удаляет класс, и мой контент снова прокручивается.

Для добавления и удаления класса я реализовал jquery.( Как я могу использовать jQuery с 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;
    }
}