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>

我正在使用离子3。

Answer 1

Please try below link for scroll-able list

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

Answer 2

这是@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>

如何使静态离子列表在离子中滚动？

2 个答案: