离子：离子列表上面的谷歌地图与动画

Question

我是离子的初学者。我有一个要求，它在地图视图上方有一个离子列表。

我不知道如何实现这个设计。在谷歌地图视图下方，显示了一个项目的列表。当我们向上滚动列表时将占据屏幕的90％。我们再次向下滚动视图列表。

请有人建议我如何使用动画来处理这种情况。

提前致谢。

Answer 1

也许是这样的？ “map_canvas”div是Google地图容器

.events-map-container {
    height: 90%;
}

.events-list-container {
    height: 10%;
}

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>My Route</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="map_canvas" class="events-map-container"></div>
  <div class="event-list-container"></div>
  <ion-list>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="leaf" item-start></ion-icon>
      <h2>Bachelor party</h2>
      <p>21/01/2018</p>
      <ion-icon name="information-circle" item-end></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>