Ionic 4，离子滑动垂直滚动不起作用答案

【问题标题】：Ionic 4, ion-slides vertical scrolling not workingIonic 4，离子滑动垂直滚动不起作用
【发布时间】：2019-07-18 04:24:17
【问题描述】：

我在 ion-slide 中有一个组件，它的滚动不起作用

这是我的代码：

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

<ion-slide>

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

</ion-slide>

【问题讨论】：

您能否详细说明一下，它是如何不起作用的，您在期待什么，发生了什么？
@PLASMAchicken 主搜索组件包含不垂直滚动的元素列表
@JVManageProj 现在检查我的答案

标签： angular ionic-framework angular7 ionic4 ion-slides

【解决方案1】：

请试试这个：

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

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

【讨论】：

【解决方案2】：

请尝试以下代码：

.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;
}

【讨论】：