ionic：带有动画的谷歌地图上方的离子列表答案

【问题标题】：ionic: ion-list above google map with animationionic：带有动画的谷歌地图上方的离子列表
【发布时间】：2018-01-08 19:08:39
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

标签： cordova google-maps ionic-framework

【解决方案1】：

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

.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>

【讨论】：