Ionic 4, вертикальная прокрутка ионных слайдов не работает - PullRequest
Новая
       38

Ionic 4, вертикальная прокрутка ионных слайдов не работает

0 голосов
/ 24 февраля 2019

У меня есть компонент внутри ion-slide, и его свиток не работает

вот мой код:

{{tab}} 

<ion-slide style="height:100%">
  <main-search></main-search>
</ion-slide>

<ion-slide>

    <div style="height:100%">Page 2 </div>

</ion-slide>

Ответы [ 2 ]

0 голосов
/ 02 сентября 2019

Пожалуйста, попробуйте это: 

.swiper-slide {
    overflow-y: scroll;    
    display: block;    
}

https://forum.ionicframework.com/t/ionic-scroll-within-ionic-slide-not-working/47099/7

0 голосов
/ 27 мая 2019

Пожалуйста, попробуйте следующий код:

.html 

<ion-slides [options]="slideOpts"
                pager="true">
      <ion-slide>
        <ion-list>
          <ion-item>
            <h2>Some title1</h2>
          </ion-item>
          <ion-item>
            <h2>Some title2</h2>
          </ion-item>
          <ion-item>
            <h2>Some title3</h2>
          </ion-item>
          <ion-item>
            <h2>Some title4</h2>
          </ion-item>
          <ion-item>
            <h2>Some title5</h2>
          </ion-item>
          <ion-item>
            <h2>Some title45</h2>
          </ion-item>
          <ion-item>
            <h2>Some title46</h2>
          </ion-item>
        </ion-list>
      </ion-slide>

      <ion-slide>
        <ion-list>
          <ion-item>
            <h2>Some title1</h2>
          </ion-item>
          <ion-item>
            <h2>Some title2</h2>
          </ion-item>
          <ion-item>
            <h2>Some title3</h2>
          </ion-item>
          <ion-item>
            <h2>Some title4</h2>
          </ion-item>
          <ion-item>
            <h2>Some title5</h2>
          </ion-item>
          <ion-item>
            <h2>Some title45</h2>
          </ion-item>
          <ion-item>
            <h2>Some title46</h2>
          </ion-item>
          <ion-item>
            <h2>Some title1</h2>
          </ion-item>
          <ion-item>
            <h2>Some title2</h2>
          </ion-item>
          <ion-item>
            <h2>Some title3</h2>
          </ion-item>
          <ion-item>
            <h2>Some title4</h2>
          </ion-item>
          <ion-item>
            <h2>Some title5</h2>
          </ion-item>
          <ion-item>
            <h2>Some title45</h2>
          </ion-item>
          <ion-item>
            <h2>Some title46</h2>
          </ion-item>
        </ion-list>
      </ion-slide>
    </ion-slides>

.ts 

  slideOpts = {
      initialSlide: 0,
      speed: 500
  };

.scss

Для вертикальной прокрутки 

ion-slides{
  overflow-y: scroll;
}

Для горизонтальной прокрутки 

ion-slides{
  overflow-x: scroll;
}
...