0

我在 ionic 中有一个静态列表，我只需要列表部分即可滚动。我已经尝试过这个 堆栈溢出问题的答案，但它对我不起作用。

它说 -如果我们的代码中有 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>

我正在使用离子 3。

4

2 回答 2

1 
Please try below link for scroll-able list

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

于 2018-06-20T14:08:42.317 回答
0

这是@NRaghavendra 建议的最佳解决方案

<ion-scroll scrollY="true" style="height: 200px">
    <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>
</ion-scroll>
于 2018-06-21T06:34:10.347 回答