Scroll orizzontale in ionico 2

Question

Ho cercato di implementare lo scroll orizzontale in 2 pagine ioniche. Ma il contenuto viene sempre spostato verticalmente.

Ho provato a scrivere il mio css impostando "overflow-x per scorrere". Ma non ha funzionato. Ho anche provato il componente ionico a scorrimento ionico impostando 'scrollX = true'. Ma l'intero contenuto è stato nascosto. non era visibile sulla pagina. Di seguito è riportato il codice di esempio utilizzato per lo scorrimento ionico. Non sono sicuro di cosa mi manchi esattamente qui.

Qualche consiglio su questo pls ?. (Sono nuovo di ionica 2 e CSS. Mi spiace se la domanda è troppo semplice.)

<ion-navbar *navbar primary> 
    <ion-title> 
     Title 
    </ion-title> 
</ion-navbar> 

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

     <ion-card> 
      <ion-card-content> 
       content 
      </ion-card-content> 
     </ion-card> 
     <ion-card> 
      <ion-card-content> 
       content 
      </ion-card-content> 
     </ion-card> 

    </ion-scroll> 
</ion-content> 

Answer 1

ho raggiunto la scorrimento orizzontale con diversi componenti ionici:

ionico avatar scorrevole HTML

<ion-content> 
<ion-row> 
    <ion-item no-lines> 
    <ion-scroll scrollX="true" scroll-avatar> 
     <ion-avatar> 
      <img src="../../assets/whatever.png" *ngFor="let avatar of avatars" class="scroll-item"/> 
     </ion-avatar> 
    </ion-scroll> 
    </ion-item> 
    </ion-row> 
</ion-content> 

ionico-icon scorrevole HTML

<ion-content> 
    <ion-row> 
    <ion-item no-lines> 
     <ion-scroll scrollX="true"> 
     <ion-icon *ngFor="let avatar of avatars" name="radio-button-on" class="scroll-item selectable-icon"></ion-icon> 
     </ion-scroll> 
    </ion-item> 
    </ion-row> 
</ion-content> 

SCSS

ion-scroll[scrollX] { 
    white-space: nowrap; 
    height: 120px; 
    overflow: hidden; 

    .scroll-item { 
     display: inline-block; 
    } 

    .selectable-icon{ 
     margin: 10px 20px 10px 20px; 
     color: red; 
     font-size: 100px; 
    } 

    ion-avatar img{ 
     margin: 10px; 
    } 
    } 

    ion-scroll[scroll-avatar]{ 
    height: 60px; 
    } 

    /* Hide ion-content scrollbar */ 
    ::-webkit-scrollbar{ 
    display:none; 
    } 

che ha funzionato per me con ionica versione 3.2.0.

ionic scrollX example

Answer 2

Non sono sicuro se questo è il problema esatto si hanno, ma se il vostro in una visione che ha passare il dito indietro abilitato impedirà lo scorrimento orizzontale ovunque su quella pagina. Ecco come spegnerlo all'interno della classe @Page:

constructor(nav: NavController) { 
    nav.swipeBackEnabled = false; 
} 

Answer 3

Per scorrimento orizzontale è necessario aggiungere il seguente tag:

<scroll-content> 
    <ion-scroll scrollX="true" class="item"> 
     //your content 
    </ion-scroll> 
</scroll-content>` 

Il contenuto deve essere all'interno di esso.

Questo codice ha funzionato per me:

<scroll-content > 
    <ion-scroll scrollX="true" class="item"> 
     <ion-row> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
      <ion-col width-25> 
       Item 1 
      </ion-col> 
     </ion-row> 
    </ion-scroll> 
</scroll-content>` 

Answer 4

è necessario definire l'altezza del vostro contenitore <ion-scroll>. Se non si esegue questa operazione, sembra che l'elemento <ion-scroll> ha sempre un'altezza pari a 0.

Esempio:

<ion-scroll scrollX="true" style="width:100vw;height:350px"> 
    <img src="test.jpg style="border:1px dotted red;width:700px;height:350px"> 
</ion-scroll> 

Answer 5

Per ionico 2 RC questo codice ha funzionato per me, volevo scorrere una lista di icone:

<ion-item> 
<ion-scroll scrollX="true" style="height: 50px;" > 
    <ion-icon *ngFor="let icon of icons; let i = index" name={{icon.icon_name}} (click)="selectIcon(icon, i)"></ion-icon> 
</ion-scroll> 
</ion-item> 

Answer 6

Avevo questo problema anche io. Ho risolto in questo modo:

1. Aggiungi questa proprietà a voi <ion-scroll> tag nel file .html:

<ion-scroll scrollX="true"> 
... your content ... 
</ion-scroll>` 

2. Aggiungi questo a voi .scss di file:

ion-scroll{ 
    overflow: scroll; 
    white-space: nowrap; 
} 

Che dovrebbe funzionare per voi :)

Answer 7

Nessuna delle risposte qui ha funzionato per me. Quello che ho finito è il seguente HTML.

<ion-scroll scrollX style="height:200px;"> 
    <div class="scroll-item"> 
    Item 1 
    </div> 
    <div class="scroll-item"> 
    Item 2 
    </div> 
</ion-scroll> 

Insieme a questo SCSS. È importante che gli elementi figlio siano display: inline-block.

ion-scroll[scrollX] { 
    white-space: nowrap; 
    .scroll-item { 
    display: inline-block; 
    } 
}