web-dev-qa-db-fra.com

Défilement horizontal dans ionique 2

J'ai essayé d'implémenter le défilement horizontal en page ionique 2. Mais le contenu est toujours défilé verticalement. 

J'ai essayé d'écrire mon propre css en réglant 'overflow-x to scroll'. Mais ça n'a pas marché. J'ai aussi essayé le composant ion-scroll de ionic en définissant 'scrollX = true'. Mais tout le contenu a été caché. c'est-à-dire qu'il n'était pas visible du tout sur la page. Voici l'exemple de code que j'ai utilisé pour ion-scroll. Je ne sais pas ce qui me manque exactement ici. 

Des conseils sur cette pls?. (Je suis nouveau dans Ionic 2 et CSS. Désolé si la question est trop simple.)

<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>
ionic-frameworkionic2
16
Thangaraj Esakky

J'ai réalisé le rouleau horizontal avec plusieurs composants ioniques:

HTML défilable ion-avatar

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

ion-icon HTML défilable

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

Cela a fonctionné pour moi avec la version 3.2.0 ionique.

Exemple de scrollX ionique

8
Juan Antonio Herrerías

Aucune des réponses ici n'a fonctionné pour moi. Ce que j'ai fini avec est le code HTML suivant.

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

Avec ce SCSS. Il est important que les éléments enfants soient display: inline-block.

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

Vous devez définir la hauteur de votre conteneur <ion-scroll>. Si vous ne le faites pas, il semble que l'élément <ion-scroll> ait toujours une hauteur de 0.

Exemple: 

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

Pour le défilement horizontal, vous devez ajouter la balise suivante:

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

Votre contenu devrait y être.

Ce code a fonctionné pour moi: 

<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>`
3
user6132962

Pour Ionic 2 RC ce code fonctionnait pour moi, je voulais faire défiler une liste d’icônes:

<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>
1
Akis Tofas

J'avais aussi ce problème. Je le résous comme ceci:

1. Ajoutez cette propriété à votre balise <ion-scroll> dans votre fichier .html: 

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

2. Ajoutez ceci à votre fichier .scss: 

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

Cela devrait fonctionner pour vous :)

1
Fran Sandi

Vous n’êtes pas sûr qu’il s’agisse du problème exact que vous rencontrez, mais si vous optez pour une vue avec glissement en arrière, cela empêchera le défilement horizontal n’importe où sur cette page. Voici comment le désactiver dans la classe @Page:

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