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

【问题标题】：How to make a static ion-list scrollable in ionic?如何在离子中使静态离子列表可滚动？
【发布时间】：2018-11-29 12:19:20
【问题描述】：

我在 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。

【问题讨论】：

你试过<ion-scroll>吗？通过这个link可能会帮助你的情况。
@NRaghavendra 我已经尝试添加它。当我尝试将我的列表放入整个列表消失。
对于您必须在 css 中或以编程方式提供 height 属性，可能您错过了。
@NRaghavendra 我曾尝试在内联以及在 css 中设置高度。这能解决问题。
请通过演示link

标签： css ionic-framework sass ionic3 ion-list

【解决方案1】：

Please try below link for scroll-able list

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

【讨论】：

这里没有一个组件是可滚动的，一切都是固定的。请重新检查您发布的内容。
我已经验证并发布了一个链接。请检查底部的可滚动列表，它是可滚动的并检查代码。请验证一次。
对不起，我看到了滚动部分，但我无法从 css 部分弄清楚。您注意到在任何地方定义滚动、溢出或任何内容。它在您的示例中有效，但对于我的小问题来说太多了。 This 分两行解决问题，可能你也可以参考。谢谢。

【解决方案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>

【讨论】：