ionic 3 如何在同一页面中有两个 Y 滚动

Question

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

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

Answer 1

就像你看到的那样in the Docs:

Scroll

ion-scroll

Scroll is a non-flexboxed scroll area that can scroll horizontally or vertically. ion-scroll can be used in places where you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.

用法

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

Answer 2

我认为你需要这样的东西来利用 ion-scroll：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-scroll scrollX="false" scrollY="false" style="width: 100%; height: 50%">
    <ion-list>
      <ion-item>
        <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-item>
        <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-item>
        <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-item>
        <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-scroll>
  <ion-scroll scrollX="false" scrollY="true" style="width: 100%; height: 50%">
    <ion-list>
      <ion-item>
        <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-item>
        <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-item>
        <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-item>
        <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-scroll>
</ion-content>

每个ion-scroll组件都可以控制滚动方向，您还需要为此元素设置width/height。

ionic 3 如何在同一页面中有两个 Y 滚动

ionic 3 how to have two Y-scroll in the same page

ionic-framework

ionic2

ionic3

Scroll