css - 如何使静态 ionic 列表在 ionic 中可滚动？

Question

我在 ionic 中有一个静态列表，我只需要列表部分可以滚动。我已经试过了 stack overflow question's answer但它对我不起作用。

它说- 如果我们的代码中有 ion-item 标签，它可能会给我们带来一些问题。所以一定要删除这个标签。不知道是不是因为这个。无论我做什么，我只能让整个内容可滚动或根本不滚动。我只希望下面提到的列表部分可以滚动。

这是我的代码:

 <ion-content class="calendar-page ">
  <div class="calendar-section" padding>
    <ion-calendar #calendar></ion-calendar>
  </div>


  <div class="reminder-section ">
    <div class="bar bar-header bar-assertive section-title mt-20">
      <h2 class="title" align="center">Reminders</h2>
    </div>

    **//scrollable from here**

    <ion-list>
      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>Today, 14:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>


      <ion-item class="custom-font-size">
        GET FIT<span item-end>Today, 18:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>

      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>11 MAY 2018, 08:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
      <ion-item class="custom-font-size">
        QUIT SMOKING<span item-end>10 MAY 2018, 11:00</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
      <ion-item class="custom-font-size">
        GET FIT<span item-end>8 MAY 2018, 10:12</span>
        <ion-icon name="alarm" class="alarm-icon-color" item-end></ion-icon>
      </ion-item>
    </ion-list>

    **// scrollable till here**

  </div>
</ion-content>

我正在使用 ionic 3。

Answer 1

Please try below link for scroll-able list

https://codepen.io/KevinWang15/pen/QNJEXX