5
votes

Défilement horizontal Ionic 4 avec ngFor

Je suis perdu. Je peux faire en sorte que le défilement horizontal fonctionne correctement avec seulement html et css, mais lorsque j'introduis ngFor, il refuse de produire le même effet .. Quelqu'un a-t-il de l'expérience avec cela ou sait comment résoudre le problème?

voici mon simple code qui ne fonctionne pas:

cet exemple donne une liste verticale:

"dependencies": {
    "@angular/common": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0",
    "@ionic/pro": "2.0.4",
    "core-js": "^2.5.4",
    "firebase": "^5.8.0",
    "ngx-navigation-with-data": "^1.0.2",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },

Et celui-ci donne un large conteneur qui défile horizontalement

XXX

Et le même css pour les deux:

.container {
  width: 100px;
  background-color: green;
  overflow: hidden; 
  white-space: nowrap;
  ::-webkit-scrollbar {
    display: none;
  }
  .scroll {
    overflow: auto;
  }
}

Expliquez-moi celui-là M. Spock!

Merci pour l'aide à l'avance!

Dépendances pour faire bonne mesure:

 <div class="container" >
        <div class="scroll" scrollX="true">
            <span>item1</span>
            <span>item2</span>
            <span>item3</span>
            <span>item4</span>
            <span>item5</span>
            <span>item6</span>
            <span>item7</span>
            <span>item8</span>
            <span>item9</span>
        </div>
    </div>

angular css ionic-framework ionic4 ngfor

0 commentaires

3 Réponses :

10
votes

Essayez d'utiliser la directive sur l'élément réel qui doit être répliqué:

<div class="container">
    <div class="scroll" scrollX="true">
        <span *ngFor="let item of items | async">{{item.ProjectEvent}}</span>
    </div>
</div>

2 commentaires

cela me donne en fait une liste rendue horizontalement, ce qui est un pas dans la bonne direction! mais la liste passe à la ligne suivante au lieu de quitter l'écran et de faire défiler.

Qu'à cela ne tienne, ça l'a fait !! j'avais commenté le css "conteneur". Merci beaucoup Sergey!

7
votes

Utilisation de flexbox:

div[scrollx=true] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
     display: none;
  }
   .scroll-item {
     flex: 0 0 auto;
  }
}

https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

0 commentaires

2
votes

Peut-être essayer

<ion-segment scrollable="true">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
</ion-segment>

1 commentaires

Cela devrait être la solution mais au moment de l'écriture, le scroll ne fonctionne qu'avec shift + scroll en mode PWA, ce qui est très peu intuitif