时间戳

首页 > 解决方案 > ionic 3 如何在同一页面中有两个 Y-scroll

ionic-framework - ionic 3 如何在同一页面中有两个 Y-scroll

问题描述

我希望第一个列表不要滚动，我们可以使用 no-bounce 属性。现在第二个列表甚至没有出现。我希望该列表以 Y-scrolll 出现在底部。

    <ion-header>
  <ion-navbar>
    <ion-title>Calendar</ion-title>
    <ion-buttons end>
      <button ion-button icon-only clear padding>
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
    <ion-list>
        <ion-item>
          <ion-avatar item-start>
            <img src="img/avatar-finn.png">
          </ion-avatar>
          <h2>Finn</h2>
          <h3>Don't Know What To Do!</h3>
          <p>I've had a pretty messed up day. If we just...</p>
        </ion-item>
      </ion-list>
</ion-content>

<ion-content>
    <ion-list>
        <ion-item>
          <ion-avatar item-start>
            <img src="img/avatar-finn.png">
          </ion-avatar>
          <h2>Finn</h2>
          <h3>Don't Know What To Do!</h3>
          <p>I've had a pretty messed up day. If we just...</p>
        </ion-item>
      </ion-list>
</ion-content>

标签： ionic-frameworkionic2ionic3

解决方案

就像您在 Docs中看到的那样：

滚动

ion-scroll

Scroll 是一个非 flexboxed 滚动区域，可以水平或垂直滚动​​。ion-scroll 可用于您可能不需要整页滚动条但高度自定义的地方，例如图像扫描器或评论滚动条。

用法

<ion-scroll scrollX="true">
</ion-scroll>

<ion-scroll scrollY="true">
</ion-scroll>

<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>

输入属性

Attr        Type        Details
-------     -------     ----------
maxZoom     number      Set the max zoom amount.    
scrollX     boolean     If true, scrolling along the X axis is enabled.    
scrollY     boolean     If true, scrolling along the Y axis is enabled; requires the following CSS declaration: ion-scroll { white-space: nowrap; }
zoom        boolean     If true, zooming is enabled.

推荐阅读