ionic 3 как сделать две Y-прокрутки на одной странице - PullRequest
Новая
       7

ionic 3 как сделать две Y-прокрутки на одной странице

0 голосов
/ 11 октября 2018

Я хочу, чтобы первый список не прокручивался, как вы можете, с атрибутом 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>

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Я думаю, что вам нужно что-то вроде этого с использованием ионной прокрутки: 

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

Каждый компонент ионной прокрутки имеет контроль над направлениями прокрутки, а также вам нужно установить ширину / высоту для этого элемента.

0 голосов
/ 11 октября 2018

Так же, как вы можете видеть в Документах :

Scroll

ion-scroll

Scrollявляется не прокручиваемой областью прокрутки, которая может прокручиваться горизонтально или вертикально.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.
...